На одностраничных сайтах часто применяют анимацию появления блоков при прокрутке страницы, создавая динамичность и впечатляющий эффект. На самом деле это очень красиво выглядит, если только без фанатизма, не перезагружая сайт.
В этом обзоре мы рассмотрим jQuery плагин Revealator, который поможет реализовать анимацию блоков самым легким путем. Практически просто подставляя определенные классы элементам, чтобы те, в свою очередь, появлялись в области просмотра браузера с эффектом, закрепленным под тем или иным классом.
Параметры 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-delay19 | Установить задержку эффекта на 1900ms |
| revealator-delay20 | Установить задержку эффекта на 2000ms |
Продолжительность:
| Класс | Описание |
|---|---|
| revealator-duration1 | Установить длительность эффекта на 100ms |
| revealator-duration2 | Установить длительность эффекта на 200ms |
| revealator-duration3 | Установить длительность эффекта на 300ms |
| . | . |
| revealator-duration19 | Установить длительность эффекта на 1900ms |
| revealator-duration20 | Установить длительность эффекта на 2000ms |
Показывать эффект только один раз
При добавлении класса revealator-once к элементам, анимация блоков будет происходить лишь один раз. При отсутствии этого класса, анимация будет повторяться при прокрутке вверх и в низ.
Как это работает?
Плагин Revealator включает в себя два основных файла: fm.revealator.jquery.css – дополнительные стили эффектов, fm.revealator.jquery.js – скрипт. И, конечно, необходимо подключить библиотеку jQuery для работоспособности плагина. А также подключим еще один файл стилей, чтобы оформить внешний вид самой страницы демо-просмотра.
Так, все конструкции собрана в одном HTML коде с подключением всеми файлами. В нее входит 10 секций в каждой находится по 4 блока с классами, отвечающими за определенные эффекты анимации появления этих же блоков. В верхней части, между тегами уже подключено 4 файла: два из них относится к плагину, библиотека jQuery, стили оформления страницы.
На WordPress, добавить анимацию блоков, можно с помощью плагина Animate It!. У него также есть куча разных эффектов и при этом, он работает на чистом CSS.
Вероятно вы не раз встречали такой трюк, когда проворачивая страницу вниз, то со стороны плавно выезжают блоки с материалом, но здесь немного отличается, так как информативные блоки появятся при открытии страницы, где изначально будут расположены.
Также нужно подменить, что оформление здесь не присутствует, что можно поставить под любой стиль дизайна, с последствием все оформить под основной стиль сайта. Где как можно заметить, что CSS-анимации радуют своим трюком, где сама концепция довольно проста. Так как не нужно подключать скрипты или выставлять библиотеку, все что нужно, это поставить по месту HTML код и под него стили CSS.
Так будут приглядеть стилистика блока после установке в рабочем состояние.
Но и по самой основе, что как было сказано, она идет в одну колонку на четыре материала, где появляется возможность самостоятельно добавить столько шагов, сколько захотим в анимации ключевых кадров. Все зависит от ширины, если делать больше, то автоматически контейнеры уменьшаются, но в этом плане вам решать по количеству появление блоков.
Также этот вид выставили на темный фон:
Здесь нужно оформление, ведь идет один каркас, что стильное оформление кардинально изменит обзор.
Когда вы ищите появление блока, то что именно вы имеете ввиду!? Потому, что появление блока можно понимать по-разному! Мы сегодня рассмотрим три случая появление блока, для это понадобятся живые примеры, как это выглядит и где используется появление блока.
1. Появление и исчезновение блока при нажатии … данный пункт перенесен на следующую страницу. пример оставим как затравку… + он же будет в архиве.
Появление блока из-за края монитора, края окна.
Как это работает!?
Появление блока с помощью css
У нас есть основной блок. Который с позиционирован абсолютно, вы его положения видите после загрузки страницы.
Нас прежде всего интересует:
Далее у нас идет блок. Который будет появляться – это заголовок, который появляется слева из позиции left – 100%
