Анимированные эффекты прокрутки с Animate.css и JQuery

Вы, возможно, уже встречали на сайтах эффект: при прокрутке страницы вниз, её содержимое появляется в окне просмотра с разными анимационными эффектами.
Анимация прокрутки, которую мы собираемся реализовать, требует подключения двух библиотек:

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.

Источник