Уже давно вошло в моду применять на 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>
Теперь осталось обернуть наши 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>