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

jQuery анимация для сайта - эффекты появления DIV блоков
Javascript & jQuery 1    30102 +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

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

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


Поделиться с друзьями


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

Анимация с линиями для текста
Анимация с огнем для текста
Анимация с сердечками для текста
Анимация с конфетти для текста
Анимация с пузырьками для текста
CSS файлы для браузеров EDGE и IE
Как попросить посетителей своего сайта отключить AdBlock
Обратный таймер на JavaScript
Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
Как создать div блок с прокруткой на JS?

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

  1. Megoydagi Megoydagiev 21 декабря 2019, 16:25 # 0
    У вас анимация подгружается со скроллом. У меня она появляется при загрузке сайта, сразу все. Как сделать анимацию при прокрутке к диву?
    1. Алексей Власов 21 декабря 2019, 16:40 # 0
      Попробуйте в точности прописать такие же классы, как в примерах. Используйте задержку (класс revealator-delay1). Перепроверьте, что все скрипты подключены правильно и в консоли нет ошибок.
      1. Megoydagi Megoydagiev 22 декабря 2019, 00:18 # 0
        Вот как есть так и прописываю. Через copy paste

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

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