Как сделать плавное появление объектов на лендинге?

Question

[Nikita Titov]

Всем привет, много где видел такой эффект, но не знаю как он называется.
В общем, когда заходишь на сайт, все объекте на сайте (текст, картинки в основном) плавно появляются когда я на него захожу. А также когда крутишь его вниз, происходит такой же эффект. Как будто текст на сайте был невидим, а когда ты крутишь его вниз, он появляется.

В общем, объяснять я толком не горазд, я очень надеюсь что вы поняли меня.

Answer 1

[spike364]

wow.js + animate.css

Comments

[Александр Малинов]

Лично мне scrollrevealjs.org показался удобней wow.js (ну и звезд у него на гитхабе побольше)

Answer 2

[Андрей Бережной]

Animate.css для анимаций.

Для того чтобы анимация воспроизводилась, когда блок попадает видимую область браузера, попробуйте плагин jQuery-viewport-checker

Answer 3

[Дмитрий Христоев]

https://www.youtube.com/watch?v=zrGgSDVzpQI

Answer 4

[Роман]

При прокрутке - можно воспользоваться очень простым скриптом

<script type="text/javascript">
$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('#ten-hidden').addClass("sticky");
  }
  else{
    $('#ten-hidden').removeClass("sticky");
  }
if ($(this).scrollTop() > 1){  
    $('#sanremo-logo').addClass("sticky");
  }
  else{
    $('#sanremo-logo').removeClass("sticky");
  }
});
</script>

Этот скрипт добавляет class "sticky" элементу с id "sanremo-logo", пример - sanremo-pizza.com появление тени при прокрутке страницы на 1 пиксель, скорость появления можно задать на css transition: all 0.3s;