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

jQuery анимация для сайта - эффекты появления DIV блоков
Javascript & jQuery 1    2790 +1

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

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

      
      
      

Скачать плагин 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 к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.

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


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

     
анимация скольжения вверх
анимация скольжения вверх с задержкой эффекта на 100ms
анимация скольжения вверх с задержкой эффекта на 200ms

анимация скольжения вверх
анимация скольжения вверх с задержкой эффекта на 100ms
анимация скольжения вверх с задержкой эффекта на 200ms

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

     
анимация скольжения вниз
анимация скольжения вниз с задержкой эффекта на 100ms
анимация скольжения вниз с задержкой эффекта на 200ms

анимация скольжения вниз с задержкой эффекта на 100ms
анимация скольжения вниз с задержкой эффекта на 200ms

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

     
анимация скольжения влево
анимация скольжения влево с задержкой эффекта на 200ms
анимация скольжения влево с задержкой эффекта на 400ms

анимация скольжения влево
анимация скольжения влево с задержкой эффекта на 200ms
анимация скольжения влево с задержкой эффекта на 400ms

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

     
анимация скольжения вправо
анимация скольжения вправо с задержкой эффекта на 200ms
анимация скольжения вправо с задержкой эффекта на 400ms

анимация скольжения вправо
анимация скольжения вправо с задержкой эффекта на 200ms
анимация скольжения вправо с задержкой эффекта на 400ms

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

     
анимация приближения
анимация приближения задержкой эффекта на 100ms
анимация приближения с задержкой эффекта на 200ms

анимация приближения
анимация приближения задержкой эффекта на 100ms
анимация приближения с задержкой эффекта на 200ms

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

     
анимация уменьшения
анимация уменьшения с задержкой эффекта на 100ms
анимация уменьшения с задержкой эффекта на 200ms

анимация уменьшения
анимация уменьшения с задержкой эффекта на 100ms
анимация уменьшения с задержкой эффекта на 200ms

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

     
анимация постепенного появления
анимация постепенного появления с задержкой эффекта на 200ms
анимация постепенного появления с задержкой эффекта на 400ms

анимация постепенного появления
анимация постепенного появления с задержкой эффекта на 200ms
анимация постепенного появления с задержкой эффекта на 400ms

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

     
анимация поворота влево
анимация поворота влево с задержкой эффекта на 100ms
анимация поворота влево с задержкой эффекта на 200ms

анимация поворота влево
анимация поворота влево с задержкой эффекта на 100ms
анимация поворота влево с задержкой эффекта на 200ms

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

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


Похожие статьи:

Как попросить посетителей своего сайта отключить AdBlock
Обратный таймер на JavaScript
Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
Как создать div блок с прокруткой на JS?
Скролинг страницы вверх и вниз по клику на кнопку
Калькулятор расчета стоимости натяжных потолков на jQuery
Parallax эффект для одиночного элемента с библиотекой RELLAX
Плавная прокрутка страницы после нажатия на якорную ссылку

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte

    Рубрики блога

    Последние комментарии

    Алексей Власов 16 октября 2018, 14:27
    Универсальный и очень простой PHP парсер 10
    Алексей Власов 13 октября 2018, 18:57
    Бесконечное сохранение ресурсов в MODX 2
    Александр Петров 30 сентября 2018, 20:54
    Пишем на SQL без SQL: основы по RedBean PHP 10