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

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

Свойство clip-path
clip-[ath

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

Читать полностью
Библиотека Animate.css
animate.css

CSS3 поддерживает покадровую анимацию, которая позволяет создавать сложные анимации объекта. Существует возможность задавать множество параметров работы анимации при помощи свойства animation и правила @keyframen.

Но лучше воспользоваться готовыми решениями, которые позволяют анимировать любой объект. Для этого воспользуемся библиотекой Animate it.

Читать полностью
Lightbox на чистом CSS3 без JavaScript
Lightbox на чистом CSS3 без использования JavaScript

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

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

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

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

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