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

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

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

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

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

Читать полностью
Ссылки, события при наведении и клике

Стандартный вид ссылки это текст темно-фиолетового цвета, подчеркнутый снизу. При клике цвет изменяется на красный и подчеркивание остается. Первоначально верстальщики обходились малым: меняли цвет первоначального текста, убирали подчеркивание при наведении и клике, изменяя при этом и цвет ссылки.

Читать полностью
Градиент в качестве границы блоков
Граница блока - градиент

Обычно границы задаются цветом, причем каждая из границ может иметь свой цвет. Для того, чтобы границы имели плавные переходы от цвета к цвету из макета сайта вырезались картинки и вставлялись в код страницы.
Попробуем решить задачу современными средствами верстки. В CSS3 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

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

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

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

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