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

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

Тег  <hr>  или просто линия
Или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)

Читать полностью
Эффекты при оформлении текста
Свойство -webkit-text-stroke

Мы запросто можем задать границу блоку, рисунку, таблице, тексту. Именно тексту, но не каждой букве этого текста. Хотя стоит попробовать.

В спецификации CSS3 есть свойство -webkit-text-stroke, которое позволяет это сделать.

Читать полностью
Псевдоэлементы ::before и ::after
Псевдоэлементы

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

Эти псевдоэлементы позволяют вставить на странице ту информацию, которой нет в HTML-коде.

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

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

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

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