При помощи 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