• Главная
  • Карта сайта
Не найдено

Анимация появления блоков для 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.

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss