css эффекты появления блоков

Это стильный эффект анимации на появление блоков на CSS, который стал очень популярный, где при открытии страницы он выезжает с правой стороны. Но главное преимущество этого эффекта анимации постепенного появление, что полностью создано на чистом CSS. Здесь изначально идет 4 блока или вид материалов, что модно разместить на них ключевое слово, виде название, а также краткое описание.

Вероятно вы не раз встречали такой трюк, когда проворачивая страницу вниз, то со стороны плавно выезжают блоки с материалом, но здесь немного отличается, так как информативные блоки появятся при открытии страницы, где изначально будут расположены.

Также нужно подменить, что оформление здесь не присутствует, что можно поставить под любой стиль дизайна, с последствием все оформить под основной стиль сайта. Где как можно заметить, что CSS-анимации радуют своим трюком, где сама концепция довольно проста. Так как не нужно подключать скрипты или выставлять библиотеку, все что нужно, это поставить по месту HTML код и под него стили CSS.

Так будут приглядеть стилистика блока после установке в рабочем состояние.

Но и по самой основе, что как было сказано, она идет в одну колонку на четыре материала, где появляется возможность самостоятельно добавить столько шагов, сколько захотим в анимации ключевых кадров. Все зависит от ширины, если делать больше, то автоматически контейнеры уменьшаются, но в этом плане вам решать по количеству появление блоков.

Также этот вид выставили на темный фон:

Здесь нужно оформление, ведь идет один каркас, что стильное оформление кардинально изменит обзор.

Думаю, многие видели, как при загрузке сайта, начинают с разных сторон выплывать различные блоки. Одни просто плавно появляются, другие «подгружаются» снизу, а третьи имеют более сложную анимацию.

Особенно эффектно данные «спецэффекты» смотрятся, когда пользователь прокручивает страницу и видит подгрузку новых html элементов. На сегодня самой лучшей библиотекой по созданию анимации блоков я считаю wow.js. Этот плагин не требует jQuery библиотеки! А значит будет работать на любом сайте.

Как вы видите из примера эффектов просто великое множество. Рассмотрим как установить скрипт:

1. Подключить wowanimate.css и wow.min.js
2. Добавить после wow.min.js внутри head запись , которая запустит активацию эффектов
3. Теперь, чтобы назначить эффект на нужный тег пишите к нему класс:

Поскольку скрипт может загружать блоки с разным типом анимации, ее мы сразу указываем в классе. Например, тег с классом будет означать, что на этом блоке будет плавное появление блока снизу-вверх.

Также можно задавать атрибуты к каждому тегу с очень полезными свойствами:
data-wow-duration: Длительность анимации;
data-wow-delay: Задержка перед стартом анимации;
data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
data-wow-iteration: Сколько раз повторять анимацию

На одностраничных сайтах часто применяют анимацию появления блоков при прокрутке страницы, создавая динамичность и впечатляющий эффект. На самом деле это очень красиво выглядит, если только без фанатизма, не перезагружая сайт.

В этом обзоре мы рассмотрим 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.

Оцените статью