анимация появления элементов на странице
1 мин. чтения
В данной статье мы рассмотрим как можно добавить различную анимацию появления для любого элемента на странице с помощью плагина Revealator.
Подключение плагина RevealatorЭффекты, задержки и длительность анимации по умолчанию
На Landing page (посадочных страницах) часто можно заметить анимацию появления различных блоков. Это выглядит достаточно динамично и привлекательно.
Самый простой способ добавить анимацию на страницу — это использовать плагин jQuery под названием Revealator. Подключив данный плагин, нам останется лишь указывать классы с названием анимации, которая нам необходима.
Для начала необходимо скачать последнюю версию с GitHub и распаковать в папку с вашим проектом.
Затем необходимо подключить плагин к вашему проекту, добавив следующий код между тегами <head>:
<link rel="stylesheet" href="fm. revealator.jquery.css"> <script src="jquery-1.11.3.min.js"></script> <script src="fm.revealator.jquery.js"></script>
Пример использования:
<div> Тут какой-нибудь текст или элемент </div> <div> Тут какой-нибудь текст или элемент </div>
Все эффекты вы можете просмотреть на демонстрационной странице.
Эффекты, задержки и длительность анимации по умолчанию
Эффекты
Класс | Описание |
revealator-fade | Простое появление объекта |
revealator-rotateleft | Появление с легким поворотом влево |
revealator-rotateright | Появление с легким поворотом вправо |
revealator-slideleft | Появление со скольжением справа налево |
revealator-slideright | Появление со скольжением слева на право |
revealator-slideup | Появление со скольжением снизу вверх |
revealator-zoomin | Появление с эффектом увеличения |
revealator-zoomout | Появление с эффектом уменьшения |
Задержки
Класс | Описание |
revealator-delay1 | Установить задержку анимации 100мс |
revealator-delay3 | Установить задержку анимации 200мс |
revealator-delay4 | Установить задержку анимации 300мс |
… | … |
revealator-delay19 | Установить задержку анимации 1900мс |
revealator-delay20 | Установить задержку анимации 2000мс |
Длительность анимации
Класс | Описание |
revealator-duration1 | Длительность анимации 100мс |
revealator-duration2 | Длительность анимации 200мс |
revealator-duration3 | Длительность анимации 300мс |
… | … |
revealator-duration19 | Длительность анимации 1900мс |
revealator-duration20 | Длительность анимации 2000мс |
Можно использовать revealator-speed## |
Вам может быть интересно:
/* | |
Плагин Revealator jQuery | |
Revealator — это подключаемый модуль на основе jQuery для добавления эффектов к элементам, которые входят в окно. Он прост и удобен в использовании. | |
версия 1.3, 11 января 2016 г. | |
от Ingi á Steinamørk | |
Лицензия Массачусетского технологического института (MIT) | |
Авторское право (c) 2016 Qodio | |
Настоящим предоставляется бесплатное разрешение любому лицу, получающему копию | |
этого программного обеспечения и связанных с ним файлов документации («Программное обеспечение»), для решения | |
в ПО без ограничений, включая без ограничений права | |
на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу | |
копий Программного обеспечения и разрешить лицам, которым Программное обеспечение | |
предоставляется для этого при соблюдении следующих условий: | |
Приведенное выше уведомление об авторских правах и это уведомление о разрешении должны быть включены во все | |
копий или существенных частей Программного обеспечения. | |
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ | |
ПОДРАЗУМЕВАЕТСЯ, ВКЛЮЧАЯ, ПОМИМО ПРОЧЕГО, ГАРАНТИИ КОММЕРЧЕСКОЙ ЦЕННОСТИ, | |
ПРИГОДНОСТЬ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ И НЕНАРУШЕНИЕ ПРАВ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ | |
АВТОРЫ ИЛИ ВЛАДЕЛЕЦ АВТОРСКИХ ПРАВ НЕСУТ ОТВЕТСТВЕННОСТЬ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УЩЕРБ ИЛИ ДРУГОЕ | |
ОТВЕТСТВЕННОСТЬ, ВОЗНИКАЮЩАЯ ИЗ ДОГОВОРА, ДЕЛИКТА ИЛИ ИНЫМ ОБРАЗОМ, ВОЗНИКАЮЩАЯ ИЗ, | |
ИЗ ИЛИ В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ИЛИ ДРУГИМИ СДЕЛКАМИ В | |
ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ. | |
*/ | |
// Эффекты | |
.revealator-fade | |
.revealator-slideup | |
.revealator-slideleft | |
.revealator-sliderright | |
.revealator-slidedown | |
.revealator-zoomin | |
.revealator-zoomout | |
.revealator-rotateleft | |
. revealator-rotateright | |
/* Длительность эффекта по умолчанию */ | |
/* Эффект затухания */ | |
.revealator-fade | |
непрозрачность 0 | |
&.раскрыватель-внутри | |
&.revealator-частично-выше | |
&.revealator-выше | |
непрозрачность 1 | |
/* Эффект скольжения вверх */ | |
. revealator-slideup | |
преобразование перевода (0, 100 пикселей) | |
непрозрачность 0 | |
&.раскрыватель-внутри | |
&.revealator-частично-выше | |
&.revealator-выше | |
преобразование перевода (0, 0) | |
непрозрачность 1 | |
/* Эффект слайда влево */ | |
.revealator-slideleft | |
преобразование перевода (100px, 0) | |
непрозрачность 0 | |
&. раскрыватель-внутри | |
&.revealator-частично-выше | |
&.revealator-выше | |
преобразование перевода (0, 0) | |
непрозрачность 1 | |
/* Эффект слайда вправо */ | |
.revealator-sliderright | |
преобразование перевода (-100px, 0) | |
непрозрачность 0 | |
&.раскрыватель-внутри | |
&.revealator-частично-выше | |
&. revealator-выше | |
преобразование перевода (0, 0) | |
непрозрачность 1 | |
/* Эффект скольжения */ | |
.revealator-slidedown | |
преобразование перевода (0, -100px) | |
непрозрачность 0 | |
&.раскрыватель-внутри | |
&.revealator-частично-выше | |
&.revealator-выше | |
преобразование перевода (0, 0) | |
непрозрачность 1 | |
/* Эффект масштабирования */ | |
. revealator-zoomin | |
масштаб преобразования (.75) | |
непрозрачность 0 | |
&.раскрыватель-внутри | |
&.revealator-частично-выше | |
&.revealator-выше | |
масштаб преобразования(1) | |
непрозрачность 1 | |
/* Эффект уменьшения */ | |
.revealator-zoomout | |
масштаб преобразования (1,5) | |
непрозрачность 0 | |
&. раскрыватель-внутри | |
&.revealator-частично-выше | |
&.revealator-выше | |
масштаб преобразования(1) | |
непрозрачность 1 | |
/* Эффект поворота влево */ | |
.revealator-rotateleft | |
преобразование вращения (20 градусов) | |
непрозрачность 0 | |
&.раскрыватель-внутри | |
&.revealator-частично-выше | |
&. revealator-выше | |
преобразование вращения (0 градусов) | |
непрозрачность 1 | |
/* Эффект поворота вправо */ | |
.revealator-rotateright | |
преобразование вращения (-20 градусов) | |
непрозрачность 0 | |
&.раскрыватель-внутри | |
&.revealator-частично-выше | |
&.revealator-выше | |
преобразование вращения (0 градусов) | |
непрозрачность 1 | |
// Задержка | |
для i в 1. .30 | |
.revealator-delay{i} | |
задержка перехода: i * 100 мс !важно | |
&.revealator-ниже | |
&.revealator-частично-ниже | |
задержка перехода: 0 мс !важно | |
// Скорость | |
для i в 1..15 | |
.revealator-скорость{i} | |
.revealator-duration{i} | |
длительность перехода: i * 100 мс !важно | |
Креативный код Wifeo: создайте потрясающий веб-сайт
Полный загрузчик css3 #css3 #loader #full css #keyframes #animation Первая статья Сложность :Поле Click-To-Tweet с цитатой #social #twitter Первая статья Сложность :Удобная форма для приусадебного участка с выравниванием по верхнему краю #form #user #design Первая статья Сложность :Pure css переключатель #add #animate #animation #button #click #color #окно подтверждения #css3 #design #flatdesign #form #full css #full css3 #input #material #material design #no image #transition #user Первая статья Сложность :Onclick Password Revelator #password #mousedown #mouseup #jquery #registration Первая статья Сложность :Аккордеон с несколькими параметрами #accordion #animate #jquery #slide Первая статья Сложность :Удивительный дизайн простой лайтбокс #слайд-шоу #лайтбокс #diaporama #slider #click #css #design #flatdesign #hide #hover #html #information #jquery #material design #media #nav #navigation #popup #query #responsive #show #slide #ui #user Первая статья Сложность :Индикатор выполнения Jquery #loading bar #loading #animate #jquery #ui #user Первая статья Сложность :Pure css hover title #animation #color #css #css3 #design #flatdesign #form #full css #full css3 #google #hover #html #login #material design #menu #nav #profil #show #social #transition #ui #user Первая статья Сложность :Цифровой ползунок ввода пользовательского интерфейса #slider #input #form #jquery #ui Первая статья Сложность :Мобильное меню круга css #border #border radius #button #click #color #css #design #flatdesign #jquery #menu #nav #navigation #profil #scale #transition #ui #user Первая статья Сложность :Отзывчивый макет div #queries #media #@media query #query #animate #material #responsive #design #nav #pure css #show #social #transition #madia #material design Первая статья Сложность :ADVENT’S CSS3 #3 #snow #animate #animation #bounce #color #css3 #flatdesign #full css #google #hide #keyframes #low poly #material design #no image #pure css #show #skewX #skewY #transition #ui #user Первая статья Сложность :ADVENT’S CSS3 анимация #2 #animate #animation #bounce #color #css #css3 #flatdesign #full css #google #hide #keyframes #low poly #material design #no image #pure css #show #skewX #skewY # переход #ui #user Первая статья Сложность :ADVENT’S only CSS3 анимация #1 #animate #animation #bounce #color #css #css3 #flatdesign #full css #google #hide #keyframes #low poly #material design #no image #pure css #show #skewX #skewY #transition #ui #user Первая статья Сложность :PURE CSS PULSE BUTTON #animate #animation #border #border radius #bounce #button #color #css3 #flatdesign #form #hover #keyframes #loader #login #material design #navigation #profil #scale #transform #transition # ui #user Первая статья Сложность :PURE CSS INBOX BUTTON HOVER #inbox #animation #ball #box #box #button #css #css3 #flatdesign #google #hover #material design #menu #nav #navigation #profil #show #social #transition #ui #user Первая статья Сложность :Форма слайда JQuery #slide #jquery #form #ui Первая статья Сложность :ИГРАТЬ С ШРИФТОМ CSS3 #background-clip #animate #animation #color #css3 #flatdesign #full css #keyframes #material design #perspective #pure css Первая статья Сложность :SIMPLE CSS3 NTH-CHILD USABILITY #nth-child #css3 #facebook #flatdesign #full css3 #material design #navigation #pure css #ui Первая статья Сложность :CSS3 LOW POLY BUTTON #skewX #skewY #animation #button #color #css3 #flatdesign #full css3 #hover #keyframes #low poly #menu #nav #navigation #perspective #purecss #rotatey #transform Первая статья Сложность :Три части jQuery animate #accordion #animate #jquery #navigation #hide #show Первая статья Сложность :CSS3 SIMPLE LOADER #animation #border #color #css3 #flatdesign #full css3 #hide #keyframes #loader #low poly #no image #pure css #rotatey #transform #transition #ui #user Первая статья Сложность :МЕНЮ ДИЗАЙНА МАТЕРИАЛОВ CSS #accordion #animation #color #css #flatdesign #google #hide #hover #material design #menu #nav #navigation #perspective #scale #show #transition #ui #user Первая статья Сложность :MATERIAL DESIGN ALBUM CARD #accordion #animation #box #button #click #css #flatdesign #google #hide #information #jquery #low poly #material design #menu #nav #navigation #popup #show #slideshow #transition # ui #user Первая статья Сложность :BUTTON MATERIAL ANIMATION #material design #animation #bounce #button #click #css #flatdesign #full css #hover #keyframes #nav #navigation #scale #transform #transition #ui #user Первая статья Сложность :CSS MATERIAL DESIGN BUTTON #animation #border radius #button #click #color #css3 #flatdesign #full css #google #hover #keyframes #material design #menu #nav #navigation #no image #rotatey #transform #transition # ui #user Первая статья Сложность :MATERIAL DESIGN MENU MOBILE #accordion #animation #button #click #css #flatdesign #google #hide #low poly #menu #nav #navigation #profil #responsive #show #slideshow #transition #ui #user Первая статья Сложность :CSS OVER ANIMATION TEXTE #low poly #animation #color #css3 #flatdesign #hover #information #keyframes #menu #rotatey #slideshow #transform #transition Первая статья Сложность :PURE CSS RELOAD MATERIAL DESIGN #animation #css3 #full css3 #keyframes #material design #transform Первая статья Сложность :РАСПОЛОЖЕНИЕ АНИМАЦИИ CSS #animation #border radius #css #flatdesign #keyframes #nav #ui #user Первая статья Сложность :PURE CSS INTRO ANIMATION #animation #color #css3 #full css3 #hide #keyframes #profil #show #transition #ui #user Первая статья Сложность :ЧИСТЫЙ CSS3 3D КУБ #animation #box #color #css3 #full css #full css3 #keyframes #loader #no image #perspective #pure css #rotatey #transform #transition Первая статья Сложность :Simple jQuery Slideshow/control #flatdesign #jquery #slideshow #animate Первая статья Сложность :SIMPLE CSS SLIDESHOW #slideshow #animation #box #css #flatdesign #full css #keyframes #show #transition Первая статья Сложность :Поле входа/подписки с jQuery show #show #hide #box #click #input #jquery #login #subscribe Первая статья Сложность :PURE CSS3 NEXUS ANIMATION #animation #bounce #css3 #flatdesign #full css3 #keyframes #no image #pure css #scale #transform #transition #ui Первая статья Сложность :PURE CSS CLOUD #css #flatdesign #full css #no image #pure css Первая статья Сложность :ЧИСТАЯ АНИМАЦИЯ CSS3 #animation #css3 #full css3 #keyframes #transform Первая статья Сложность :Выбор горизонтального аккордеона с помощью jQuery #accordion #click #flatdesign #hide #jquery #show #ui Первая статья Сложность :PURE CSS3 INTRO ANIMATION #animation #border #border radius #css3 #flatdesign #full css3 #keyframes #profil #scale #transform #user Первая статья Сложность :CIRCLE PURE CSS LOADER #animation #border #border radius #css3 #full css #keyframes #loader Первая статья Сложность :Всплывающее окно подтверждения с jQuery #click #jquery #окно подтверждения #box #popup Первая статья Сложность :PURE CSS LOADER #pure css #loader #css #boot nexus #keyframes #animation Первая статья Сложность :Jquery transform rotate y #jquery #rotatey #transform #animation #transition #3d #perspective Первая статья Сложность :CSS hover scale profile #css #hover #profil #scale #animation #transition Первая статья Сложность :Css/jquery input design animation #css #jquery #search #input #flatdesign #animation Первая статья Сложность :Информация CSS HOVER #css #animation #hover #navigation #information #scale Первая статья Сложность :Эффект прокрутки параллакса jquery #parallax #scroll #jquery Первая статья Сложность :Скрыть/показать кнопку jQuery #jquery #hide #show #button #click #flatdesign Первая статья Сложность :Полное меню css #css #menu #animation #responsive #nav Первая статья Сложность :Full css ball loader #full css3 #loader #css #keyframes #animation #ball Первая статья Сложность :Css масштаб масштабирования при наведении #css #hover #scale #transition #transform #color Первая статья Сложность :Full CSS3 3D BUTTON #css3 #button #3d #hover #animation #full css #perspective Первая статья Сложность :Полный загрузчик css3 #css3 #loader #full css #keyframes #animation Первая статья Сложность :CSS hover Добавить кнопку #css #full css #add #button #keyframes Первая статья Сложность :PURE CSS3 3D hover #css #full css #social #button #keyframes Первая статья Сложность :CSS hover слайд #css #full css #hover Первая статья Сложность :3D CSS Кнопка Twitter #css #full css #social #button #twitter #hover Первая статья Сложность :3D CSS кнопка Facebook #css #full css #social #button #facebook #hover Первая статья Сложность :3D CSS кнопка Google #css #full css #social #button #google #hover Первая статья Сложность :Игра с рамкой и радиусом #css #full css #border #border radius #без изображения Первая статья Сложность :Меню пользовательского интерфейса аккордеон #ui #menu #css #html #accordion #css3 #transform Первая статья Сложность :Ui Карточка пользователя #css #pure css #user Первая статья Сложность :Full CSS3 bounce #css #pure css #bounce #keyframes #animation #css3 #full css3 Первая статья Сложность :#CSS3 #LOADER #FULL CSS #KEYFRAMES #ANIMATION #SOCIAL #FORM #ПОЛЬЗОВАТЕЛЬ #ДИЗАЙН #ДОБАВИТЬ #АНИМАТ #КНОПКА #CLICK #ЦВЕТ #ОКНО ПОДТВЕРЖДЕНИЯ #FLATDESIGN #FULL CSS3 #INPUT #MATERIAL 90 684 #МАТЕРИАЛЬНЫЙ ДИЗАЙН#БЕЗ ИЗОБРАЖЕНИЯ #ПЕРЕХОД #ПАРОЛЬ # MOUSEDOWN #MOUSEUP #JQUERY #РЕГИСТРАЦИЯ #ACCORDION #SLIDE #SLIDESHOW #LIGHTBOX #ДИАПОРАМА #СЛАЙДЕР #CSS #HIDE #HOVER #HTML #ИНФОРМАЦИЯ #МЕДИА #NAV #НАВИГАЦИЯ # Всплывающее окно #ЗАПРОС #ОТВЕТ #ПОКАЗАТЬ #UI #ПАНЕЛЬ ЗАГРУЗКИ #ЗАГРУЗКА #ВХОД #МЕНЮ #ПРОФИЛЬ #ГРАНИЦА #РАДИУС ГРАНИЦЫ 9 0685 #SCALE #QUERIES #@MEDIA QUERY #PURE CSS #MADIA #SNOW #BOUNCE #LOW POLY #SKEWX #SKEWY #TRANSFO RM #INBOX #BALL #BOX #BACKGROUND- CLIP #PERSPECTIVE #NTH-CHILD #ROTATEY #SUBSCRIBE #BOOT NEXUS #3 D #ПОИСК #ПАРАЛЛАКС #ПРОКРУТКА Уровень сложности: твердый : средний : легкий : очень легкий : Соаньер считает, что интерфейсы используются изначально. |