Уже давно вошло в моду применять на Landing Page анимацию появления блоков при скроллинге страницы. Если этим не злоупотреблять, то красивые эффекты помогут сделать сайт интересней.
В этом уроке мы реализуем анимацию используя jQuery плагин Revealator. Первым делом его нужно скачать и подключить:
Теперь осталось обернуть наши div блоки в нужный класс.
Класс | Описание |
---|---|
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 к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.
Комментарии ()