Как легко добавить CSS анимацию в WordPress

Видели ли вы на многих популярных сайтах красивую CSS анимацию? Такие анимационные эффекты как скольжение контента, всплывающие и растворяющиеся элементы и т.п. В этой статье мы расскажем, как без написания кода добавить CSS анимацию в WordPress:

css-animation-preview

Когда и почему необходимо использовать CSS анимацию?

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

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

CSS анимация намного легче видео и флэш-элементов; она очень быстро загружается и поддерживается большинством современных браузеров.

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

Настройка плагина CSS Animate IT!

Мы будем использовать специальный плагин. Он позволяет создать CSS анимацию для сайта HTML через визуальный редактор.

Установите и активируйте плагин Animate it!. Вам не надо ничего настраивать, в нем все выставлено как надо.

После этого создайте новую запись, и вы увидите в панели визуального редактора новую кнопку с надписью «Animate it!»:

animateit-button

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

animation-editor

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

Плагин предлагает три варианта: при клике мыши, наведении курсора мыши или прокрутке страницы:

animateon

Когда все это сделаете, нажмите на кнопку «Animate it», чтобы осуществить предварительный просмотр анимации.

Затем нажмите на кнопку «Вставить», чтобы добавить анимацию в запись или на страницу. Вы заметили, что плагин добавил шорткод с текстом примера в редакторе сообщений:

animate-shortcode

Вам нужно удалить содержимое внутри шорткода, и заменить его собственным текстом, изображениями или чем-то другим, что вы хотите анимировать:

content-shortcode

После этого нажмите на «Сохранить» или «Опубликовать», а затем кликните по кнопке «Просмотреть». Вы увидите свой красиво анимированный контент.

Мы надеемся, что эта статья помогла вам узнать, как просто создать анимацию для сайта на WordPress.

Перевод статьи “How to Easily Add CSS Animations in WordPress” был подготовлен дружной командой проекта Сайтостроение от А до Я.