Анимация появления блоков для Landing Page

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

В этом обзоре мы рассмотрим jQuery плагин Revealator, который поможет реализовать анимацию блоков самым легким путем. Практически просто подставляя определенные классы элементам, чтобы те, в свою очередь, появлялись в области просмотра браузера с эффектом, закрепленным под тем или иным классом.

Посмотреть Demo

Параметры jQuery плагина Revealator

Класс	Описание
revealator-fade	Обычное появление элемента
revealator-rotateleft	Появление элемента с легким поворотом влево
revealator-rotateright	Появление элемента с легким поворотом вправо
revealator-slideleft	Появление элемента слайдом справа на лево
revealator-slideright	Появление элемента слайдом слева на право
revealator-slideup	Появление элемента слайдом снизу на вверх
revealator-zoomin	Появление элемента с эффектом увеличения от большого к меньшему
revealator-zoomout	Появление элемента с эффектом увеличения от меньшего к большему

Задержка:

Класс	Описание
revealator-delay1	Установить задержку эффекта на 100ms
revealator-delay2	Установить задержку эффекта на 200ms
revealator-delay3	Установить задержку эффекта на 300ms
...	...
revealator-delay19	Установить задержку эффекта на 1900ms
revealator-delay20	Установить задержку эффекта на 2000ms

Продолжительность:

Класс	Описание
revealator-duration1	Установить длительность эффекта на 100ms
revealator-duration2	Установить длительность эффекта на 200ms
revealator-duration3	Установить длительность эффекта на 300ms
...	...
revealator-duration19	Установить длительность эффекта на 1900ms
revealator-duration20	Установить длительность эффекта на 2000ms

Показывать эффект только один раз

При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

Revealator

Как это работает?

Плагин Revealator включает в себя два основных файла: fm.revealator.jquery.css – дополнительные стили эффектов, fm.revealator.jquery.js – скрипт. И, конечно, необходимо подключить библиотеку jQuery для работоспособности плагина. А также подключим еще один файл стилей, чтобы оформить внешний вид самой страницы демо-просмотра.

Так, все конструкции собрана в одном HTML коде с подключением всеми файлами. В нее входит 10 секций в каждой находится по 4 блока с классами, отвечающими за определенные эффекты анимации появления этих же блоков. В верхней части, между тегами <head></head> уже подключено 4 файла: два из них относится к плагину, библиотека jQuery, стили оформления страницы.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Revealator Plugin</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="fm.revealator.jquery.css">
      <script src="js/jquery-1.11.3.min.js"></script>
      <script src="js/fm.revealator.jquery.js"></script>
   </head>
   <body>
      <div class="section1">
         <h1>
            ↓↓↓ Scroll down ↓↓↓
         </h1>
      </div>
      <div class="section2">
         <div class="label">
            revealator-slideup revealator-delay#
         </div>
         <div class="revealator-slideup revealator-once">
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div class="revealator-slideup revealator-delay1 revealator-once">
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div class="revealator-slideup revealator-delay2 revealator-once">
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
         <div class="revealator-slideup revealator-delay3 revealator-once">
            <img src="img/portfolio-5.jpg">
            Imma slide this in
         </div>
      </div>
      <div class="section3">
         <div class="label">
            revealator-slidedown revealator-once revealator-delay#
         </div>
         <div class="revealator-slidedown revealator-once revealator-once">
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div class="revealator-slidedown revealator-once revealator-delay1 revealator-once">
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div class="revealator-slidedown revealator-once revealator-delay2 revealator-once">
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
         <div class="revealator-slidedown revealator-once revealator-delay3 revealator-once">
            <img src="img/portfolio-1.jpg">
            Imma slide this in
         </div>
      </div>
      <div class="section4">
         <div class="label">
            revealator-slideleft revealator-delay#
         </div>
         <div class="revealator-slideleft revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div class="revealator-slideleft revealator-delay2 revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div class="revealator-slideleft revealator-delay4 revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
         <div class="revealator-slideleft revealator-delay6 revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma slide this in from right to left
         </div>
      </div>
      <div class="section5">
         <div class="label">
            revealator-slideright revealator-delay#
         </div>
         <div class="revealator-slideright revealator-once">
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div class="revealator-slideright revealator-delay2 revealator-once">
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div class="revealator-slideright revealator-delay4 revealator-once">
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
         <div class="revealator-slideright revealator-delay6 revealator-once">
            <img src="img/portfolio-4.jpg">
            Imma slide this in from left to right
         </div>
      </div>
      <div class="section6">
         <div class="label">
            revealator-zoomin revealator-delay#
         </div>
         <div class="revealator-zoomin revealator-once">
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div class="revealator-zoomin revealator-delay1 revealator-once">
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div class="revealator-zoomin revealator-delay2 revealator-once">
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
         <div class="revealator-zoomin revealator-delay3 revealator-once">
            <img src="img/portfolio-3.jpg">
            Imma zoom this in
         </div>
      </div>
      <div class="section7">
         <div class="label">
            revealator-zoomout revealator-delay#
         </div>
         <div class="revealator-zoomout revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div class="revealator-zoomout revealator-delay1 revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div class="revealator-zoomout revealator-delay2 revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
         <div class="revealator-zoomout revealator-delay3 revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma zoom this out
         </div>
      </div>
      <div class="section8">
         <div class="label">
            revealator-fade revealator-delay# revealator-duration10
         </div>
         <div class="revealator-fade revealator-duration10 revealator-once">
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div class="revealator-fade revealator-delay2 revealator-duration10 revealator-once">
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div class="revealator-fade revealator-delay4 revealator-duration10 revealator-once">
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
         <div class="revealator-fade revealator-delay6 revealator-duration10 revealator-once">
            <img src="img/portfolio-1.jpg">
            Imma fade this in
         </div>
      </div>
      <div class="section9">
         <div class="label">
            revealator-rotateleft revealator-delay#
         </div>
         <div class="revealator-rotateleft revealator-once">
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div class="revealator-rotateleft revealator-delay1 revealator-once">
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div class="revealator-rotateleft revealator-delay2 revealator-once">
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
         <div class="revealator-rotateleft revealator-delay3 revealator-once">
            <img src="img/portfolio-5.jpg">
            Imma rotate this in to the left
         </div>
      </div>
      <div class="section10">
         <div class="label">
            revealator-rotateright revealator-delay#
         </div>
         <div class="revealator-rotateright revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div class="revealator-rotateright revealator-delay1 revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div class="revealator-rotateright revealator-delay2 revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
         <div class="revealator-rotateright revealator-delay3 revealator-once">
            <img src="img/portfolio-2.jpg">
            Imma slide this in to the right
         </div>
      </div>
      <div class="section">
         <div class="label">
            End
         </div>
      </div>
   </body>
</html>

На WordPress, добавить анимацию блоков, можно с помощью плагина Animate It!. У него также есть куча разных эффектов и при этом, он работает на чистом CSS.

Скачать демо просмотр