Анимация появления блоков для Landing Page
Опубликовано: 01.09.2018
На одностраничных сайтах часто применяют анимацию появления блоков при прокрутке страницы, создавая динамичность и впечатляющий эффект. На самом деле это очень красиво выглядит, если только без фанатизма, не перезагружая сайт.
В этом обзоре мы рассмотрим jQuery плагин Revealator, который поможет реализовать анимацию блоков самым легким путем. Практически просто подставляя определенные классы элементам, чтобы те, в свою очередь, появлялись в области просмотра браузера с эффектом, закрепленным под тем или иным классом.
Посмотреть Demo
Параметры jQuery плагина Revealator
Задержка:
Продолжительность:
Показывать эффект только один раз
При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.
Как это работает?
Плагин Revealator включает в себя два основных файла: fm.revealator.jquery.css – дополнительные стили эффектов, fm.revealator.jquery.js – скрипт. И, конечно, необходимо подключить библиотеку jQuery для работоспособности плагина. А также подключим еще один файл стилей, чтобы оформить внешний вид самой страницы демо-просмотра.
Так, все конструкции собрана в одном HTML коде с подключением всеми файлами. В нее входит 10 секций в каждой находится по 4 блока с классами, отвечающими за определенные эффекты анимации появления этих же блоков. В верхней части, между тегами <head></head> уже подключено 4 файла: два из них относится к плагину, библиотека jQuery, стили оформления страницы.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Revealator Plugin</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="fm.revealator.jquery.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/fm.revealator.jquery.js"></script> </head> <body> <div class="section1"> <h1> ↓↓↓ Scroll down ↓↓↓ </h1> </div> <div class="section2"> <div class="label"> revealator-slideup revealator-delay# </div> <div class="revealator-slideup revealator-once"> <img src="img/portfolio-5.jpg"> Imma slide this in </div> <div class="revealator-slideup revealator-delay1 revealator-once"> <img src="img/portfolio-5.jpg"> Imma slide this in </div> <div class="revealator-slideup revealator-delay2 revealator-once"> <img src="img/portfolio-5.jpg"> Imma slide this in </div> <div class="revealator-slideup revealator-delay3 revealator-once"> <img src="img/portfolio-5.jpg"> Imma slide this in </div> </div> <div class="section3"> <div class="label"> revealator-slidedown revealator-once revealator-delay# </div> <div class="revealator-slidedown revealator-once revealator-once"> <img src="img/portfolio-1.jpg"> Imma slide this in </div> <div class="revealator-slidedown revealator-once revealator-delay1 revealator-once"> <img src="img/portfolio-1.jpg"> Imma slide this in </div> <div class="revealator-slidedown revealator-once revealator-delay2 revealator-once"> <img src="img/portfolio-1.jpg"> Imma slide this in </div> <div class="revealator-slidedown revealator-once revealator-delay3 revealator-once"> <img src="img/portfolio-1.jpg"> Imma slide this in </div> </div> <div class="section4"> <div class="label"> revealator-slideleft revealator-delay# </div> <div class="revealator-slideleft revealator-once"> <img src="img/portfolio-2.jpg"> Imma slide this in from right to left </div> <div class="revealator-slideleft revealator-delay2 revealator-once"> <img src="img/portfolio-2.jpg"> Imma slide this in from right to left </div> <div class="revealator-slideleft revealator-delay4 revealator-once"> <img src="img/portfolio-2.jpg"> Imma slide this in from right to left </div> <div class="revealator-slideleft revealator-delay6 revealator-once"> <img src="img/portfolio-2.jpg"> Imma slide this in from right to left </div> </div> <div class="section5"> <div class="label"> revealator-slideright revealator-delay# </div> <div class="revealator-slideright revealator-once"> <img src="img/portfolio-4.jpg"> Imma slide this in from left to right </div> <div class="revealator-slideright revealator-delay2 revealator-once"> <img src="img/portfolio-4.jpg"> Imma slide this in from left to right </div> <div class="revealator-slideright revealator-delay4 revealator-once"> <img src="img/portfolio-4.jpg"> Imma slide this in from left to right </div> <div class="revealator-slideright revealator-delay6 revealator-once"> <img src="img/portfolio-4.jpg"> Imma slide this in from left to right </div> </div> <div class="section6"> <div class="label"> revealator-zoomin revealator-delay# </div> <div class="revealator-zoomin revealator-once"> <img src="img/portfolio-3.jpg"> Imma zoom this in </div> <div class="revealator-zoomin revealator-delay1 revealator-once"> <img src="img/portfolio-3.jpg"> Imma zoom this in </div> <div class="revealator-zoomin revealator-delay2 revealator-once"> <img src="img/portfolio-3.jpg"> Imma zoom this in </div> <div class="revealator-zoomin revealator-delay3 revealator-once"> <img src="img/portfolio-3.jpg"> Imma zoom this in </div> </div> <div class="section7"> <div class="label"> revealator-zoomout revealator-delay# </div> <div class="revealator-zoomout revealator-once"> <img src="img/portfolio-2.jpg"> Imma zoom this out </div> <div class="revealator-zoomout revealator-delay1 revealator-once"> <img src="img/portfolio-2.jpg"> Imma zoom this out </div> <div class="revealator-zoomout revealator-delay2 revealator-once"> <img src="img/portfolio-2.jpg"> Imma zoom this out </div> <div class="revealator-zoomout revealator-delay3 revealator-once"> <img src="img/portfolio-2.jpg"> Imma zoom this out </div> </div> <div class="section8"> <div class="label"> revealator-fade revealator-delay# revealator-duration10 </div> <div class="revealator-fade revealator-duration10 revealator-once"> <img src="img/portfolio-1.jpg"> Imma fade this in </div> <div class="revealator-fade revealator-delay2 revealator-duration10 revealator-once"> <img src="img/portfolio-1.jpg"> Imma fade this in </div> <div class="revealator-fade revealator-delay4 revealator-duration10 revealator-once"> <img src="img/portfolio-1.jpg"> Imma fade this in </div> <div class="revealator-fade revealator-delay6 revealator-duration10 revealator-once"> <img src="img/portfolio-1.jpg"> Imma fade this in </div> </div> <div class="section9"> <div class="label"> revealator-rotateleft revealator-delay# </div> <div class="revealator-rotateleft revealator-once"> <img src="img/portfolio-5.jpg"> Imma rotate this in to the left </div> <div class="revealator-rotateleft revealator-delay1 revealator-once"> <img src="img/portfolio-5.jpg"> Imma rotate this in to the left </div> <div class="revealator-rotateleft revealator-delay2 revealator-once"> <img src="img/portfolio-5.jpg"> Imma rotate this in to the left </div> <div class="revealator-rotateleft revealator-delay3 revealator-once"> <img src="img/portfolio-5.jpg"> Imma rotate this in to the left </div> </div> <div class="section10"> <div class="label"> revealator-rotateright revealator-delay# </div> <div class="revealator-rotateright revealator-once"> <img src="img/portfolio-2.jpg"> Imma slide this in to the right </div> <div class="revealator-rotateright revealator-delay1 revealator-once"> <img src="img/portfolio-2.jpg"> Imma slide this in to the right </div> <div class="revealator-rotateright revealator-delay2 revealator-once"> <img src="img/portfolio-2.jpg"> Imma slide this in to the right </div> <div class="revealator-rotateright revealator-delay3 revealator-once"> <img src="img/portfolio-2.jpg"> Imma slide this in to the right </div> </div> <div class="section"> <div class="label"> End </div> </div> </body> </html>На WordPress, добавить анимацию блоков , можно с помощью плагина Animate It!. У него также есть куча разных эффектов и при этом, он работает на чистом CSS.
