Вы, возможно, уже встречали на сайтах эффект: при прокрутке страницы вниз, её содержимое появляется в окне просмотра с разными анимационными эффектами.
Анимация прокрутки, которую мы собираемся реализовать, требует подключения двух библиотек:
1. CSS Animate – это удивительная библиотека эффектов CSS анимации. Это дает нам возможность реализации CSS анимации, назначив пользовательские имена класса для элементов.
2. jQuery Viewport Checker – Изящный небольшой скрипт, который проверяет, есть ли элемент в окне, а затем добавляет класс к нему.
Сперва подключим стиль и скрипты в заголовке документа.
<link rel="stylesheet" type="text/css" href="animate.css" /> <script src="viewportchecker.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- We also need jQuery -->
Теперь разберёмся в деталях.
Базовая структура HTML выглядит следующим образом:
<div class="container">
<div class="post"> <!-- Post content goes here --> </div>
<div class="post"> <!-- Post content goes here --> </div>
<div class="post"> <!-- Post content goes here --> </div>
<div class="post"> <!-- Post content goes here --> </div>
<div class="post"> <!-- Post content goes here --> </div>
<div class="post"> <!-- Post content goes here --> </div>
</div>
CSS
Теперь у нас есть страница с несколькими абзацами. Далее мы уберём некоторые из них, что бы скрыть те, которые находятся вне области просмотра. Для этого мы используем 2 простых имени классов со стилями.
.hidden{
opacity:0;
}
.visible{
opacity:1;
}
При этом мы скрываем любой текст с именем класса “скрытый” и показываем все с именем “видимый”.
Javascript
Теперь мы добавим JQuery магию, которая создает эффект прокрутки. Как мы видели уже, Animate.css позволяет нам использовать имя пользовательского класса, чтобы добавить анимационный эффект. В данном примере мы собираемся применить эффект FadeIn.
Таким образом, код будет
jQuery(document).ready(function() {
jQuery('.post').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeIn',
offset: 100
});
});
Что он делает? Он находит элементы и добавляет для них класс “скрытый”. Как только элементы появляются в окне просмотра, он добавляет класс “видимый” вместе с классом пользовательских анимаций. Это приводит к анимированной загрузке контента. Вы можете изменить класс FadeIn на любой другой, имеющийся в animate.css.