jQuery анимация для сайта — эффекты появления DIV блоков

Уже давно вошло в моду применять на Landing Page анимацию появления блоков при скроллинге страницы. Если этим не злоупотреблять, то красивые эффекты помогут сделать сайт интересней.

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

      <link rel="stylesheet" href="https://obninsksite.ru/fm.revealator.jquery.min.css">
      <script src="https://obninsksite.ru/js/jquery-1.11.3.min.js"></script>
      <script src="https://obninsksite.ru/js/fm.revealator.jquery.min.js"></script>

Скачать плагин Revealator

Теперь осталось обернуть наши div блоки в нужный класс.

Параметры 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-delay20 Установить задержку эффекта на 2000ms

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

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

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

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


Анимация скольжения вверх

     <div class="revealator-slideup revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения вверх">
    </div>
    
    <div class="revealator-slideup revealator-delay1 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения вверх с задержкой эффекта на 100ms">
    </div>
    
    <div class="revealator-slideup revealator-delay2 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения вверх с задержкой эффекта на 200ms">
    </div>

Анимация скольжения вниз

     <div class="revealator-slidedown revealator-once revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения вниз">
    </div>
    
    <div class="revealator-slidedown revealator-once revealator-delay1 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения вниз с задержкой эффекта на 100ms">
    </div>
    
    <div class="revealator-slidedown revealator-once revealator-delay2 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения вниз с задержкой эффекта на 200ms">
    </div>

Анимация скольжения влево

     <div class="revealator-slideleft revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения влево">
    </div>
    
    <div class="revealator-slideleft revealator-delay2 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения влево с задержкой эффекта на 200ms">
    </div>
    
    <div class="revealator-slideleft revealator-delay4 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения влево с задержкой эффекта на 400ms">
    </div>

Анимация скольжения вправо

     <div class="revealator-slideright revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения вправо">
    </div>
    
    <div class="revealator-slideright revealator-delay2 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения вправо с задержкой эффекта на 200ms">
    </div>
    
    <div class="revealator-slideright revealator-delay4 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация скольжения вправо с задержкой эффекта на 400ms">
    </div>

Анимация приближения

     <div class="revealator-zoomin revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация приближения">
    </div>
    
    <div class="revealator-zoomin revealator-delay1 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация приближения задержкой эффекта на 100ms">
    </div>
    
    <div class="revealator-zoomin revealator-delay2 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация приближения с задержкой эффекта на 200ms">
    </div>

Анимация уменьшения

     <div class="revealator-zoomout revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация уменьшения">
    </div>
    
    <div class="revealator-zoomout revealator-delay1 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация уменьшения с задержкой эффекта на 100ms">
    </div>
    
    <div class="revealator-zoomout revealator-delay2 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация уменьшения с задержкой эффекта на 200ms">
    </div>

Анимация постепенного появления

     <div class="revealator-fade revealator-duration10 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация постепенного появления">
    </div>
    
    <div class="revealator-fade revealator-delay2 revealator-duration10 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация постепенного появления с задержкой эффекта на 200ms">
    </div>
    
    <div class="revealator-fade revealator-delay4 revealator-duration10 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация постепенного появления с задержкой эффекта на 400ms">
    </div>

Анимация поворота влево

     <div class="revealator-rotateleft revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация поворота влево">
    </div>
    
    <div class="revealator-rotateleft revealator-delay1 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация поворота влево с задержкой эффекта на 100ms">
    </div>
    
    <div class="revealator-rotateleft revealator-delay2 revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация поворота влево с задержкой эффекта на 200ms">
    </div>

Анимация поворота вправо

     <div class="revealator-rotateright revealator-once">
        <img src="https://obninsksite.ru/" alt="анимация поворота вправо">
    </div>