logo

Анимация при скролле страницы

При помощи JavaScript

Как и было обещано в предыдущей статье Бегущая строка на CSS3 сегодня рассмотрим работу анимации при прокрутке (скролле) страницы. Для этого придется использовать JavaScript


$(window).scroll(function() {
    $('.element').each(function(){
      var imagePos = $(this).offset().top;
      var topOfWindow = $(window).scrollTop();
      if (imagePos < topOfWindow+200) {
        $(this).addClass('bounceInRight');
      }
    });
  });

Анимируемому элементу прописываем класс, в данном случае это element и в последней строке указываем класс анимации bounceInRight. Если нам необходимо анимировать таким способом несколько элементов, то каждому элементу присваивается свой класс, отличный от element ( например element-2 или любой другой), и соответственно указывается анимация для этого элемента.

Класс анимации выбираем из готовых шаблонов, заключенных в файле animate.css. Подробней об этом можете посмотреть в статье Библиотека animate.css. Т.е нам необходим файл animate.css, который будем использовать и в дальнейшем.

В строке if (imagePos < topOfWindow + 200) 200 - это расстояние от верха окна браузера, когда начинает работать анимация. Таким образом, сколько анимаций столько и script-ов. Не забываем подключить библиотеку jQuery

На практических примерах этот вариант рассматривать не будем, желающие могут сделать это самостоятельно. На практике, если используются всего несколько анимаций при прокрутке страницы, можно воспользоваться данным способом, но если анимаций большое количество лучше воспользоваться вторым способом.

При помощи WOW.js

В предыдущем примере для того, чтобы работала анимация, мы подключали библиотеку jQuery. Но есть другой способ. Это создание анимаций с помощью script WOW.js

С официального сайта скачиваем архив и распаковываем его. Для этого заходим в меню во вкладку GITHUB и кликаем Clone or download, затем на Download ZIP.

В архиве находим папку dist, а в ней файл wow.min.js. Это минимизированный файл wow.js, который находится здесь же. Копируем файл в папку сайта.

В теге <head> подключаем: таблицу стилей animate.css скрипт wow.min.js.


  <link rel="stylesheet" href="animate.css">
  <script type='text/javascript' src="wow.min.js"></script>

И перед закрывающем тегом </head> инициализируем скрипт wow.min.js "


<script type='text/javascript'>
  new WOW().init();
</script>

Естественно прописываем реальные пути к подключаемым файлам. Вот в принципе и все, можно заниматься анимацией при скролле. Для того, чтобы анимация работала, элементу прописываем класс wow и класс тип анимации


<div class="wow bounceInLeft" data-wow-offset="75">
  <img src="images/img.jpg" alt="Проба">
</div>
Проба

Теперь картинка анимируются как только при скролле, снизу страницы появляется "зазор" в 75px.

Атрибуты, позволяющие более тонко настраивать скрипт:

  • data-wow-duration - Длительность анимации
  • data-wow-delay - Задержка перед стартом анимации
  • data-wow-offset - Расстояние от низа экрана, когда начинается анимация
  • data-wow-iteration - Количество повторов анимации

Синтаксис


<h2 class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">Содержимое</h2>

<h2 class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">Содержимое</h2>

Скрипт WOW.js широко применяется при создании "landing page", так называемых продающих страницах. Их ещё называют страницами захвата, одностраничными сайтами. При прокрутке такой страницы информация появляется слева, справа, проявляется как бы ни откуда, что и привлекает читателя и он сответствено больше внимания обращает на появляющуюся информацию. А это как раз и необходимо автору.

Как это выглядит в реальности можете посмотреть на демо-странице.


Практические примеры 0

Рекомендую прочитать...

Анимация SVG — иконок
Анимация SVG-иконок

В этой статье рассмотрим как анимировать иконки, точнее любую SVG-графику. SVG-графика — это масштабируемая векторная графика, которую можно использовать непосредственно в коде страницы сайта. Преимущество перед остальными видами графики в том, что при увеличении размеров картинки — качество не теряется.

Читать полностью
Свойство clip-path
clip-[ath

Свойство clip-path можно применять ко всем элементам HTML, а также графическим элементам SVG и элементам-контейнерам SVG. Оно позволяет «обрезать» элемент практически любой формы. Это может быть отсечение прямоугольной формы, в виде круга или овала, а также фигура произвольной формы — много-много-многоугольник.

Читать полностью
Бегущая строка при помощи анимации на CSS3
Бегущая строка на CSS3

Бегущая строка позволяет демонстрировать информацию в яркой динамической форме, используя различные спецэффекты, привлекая значительное внимание посетителей сайта. Так, например, информация может двигаться сверху вниз и снизу вверх, справа налево и слева на право, взад-вперед и обратно, медленно и быстро, пробегая только один раз, а затем оставаясь, как обычный текст. Могут поочередно печататься несколько строк.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.