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

jQuery & JavaScript WordSmall

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

В этом обзоре мы рассмотрим 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-delay13 Установить задержку эффекта на 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.

И вдобавок, если вы задумали создать свой новые проект или улучшить существующий, приглядитесь к сервису https://zenlink.ru. Он поможет естественным путем раскрутить сайт, привлечь больше клиентов и получить массу качественных ссылок.

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

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 2
  • Garraty

    Спасибо за статью! Плагин очень прост в установке и использовании и, в то же время, с его помощью можно создать зрелищную анимацию появления элементов.

    • WordSmall

      Не за что. Плагин и правда, неплох.

Добавить комментарий
bold quote code