Как легко добавить CSS анимацию в WordPress
Видели ли вы на многих популярных сайтах красивую CSS анимацию? Такие анимационные эффекты как скольжение контента, всплывающие и растворяющиеся элементы и т.п. В этой статье мы расскажем, как без написания кода добавить CSS анимацию в WordPress:
Когда и почему необходимо использовать CSS анимацию?
Анимация для сайта привлекает внимание пользователей к различным частям страницы. Вы можете использовать ее для товаров или выделить кнопку призыва к действию.
На многих сайтах CSS анимация «оживает» при прокрутке странички, что делает представление контента более интересным, ярким, цепляющим и прогрессивным.
CSS анимация намного легче видео и флэш-элементов; она очень быстро загружается и поддерживается большинством современных браузеров.
Вы можете вручную вставить анимацию в тему WordPress. Тем не менее, большинство новичков не хотят тратить время на изучение CSS. Рассмотрим, как можно легко добавить CSS анимацию на свой WordPress сайт.
Настройка плагина CSS Animate IT!
Мы будем использовать специальный плагин. Он позволяет создать CSS анимацию для сайта HTML через визуальный редактор.
Установите и активируйте плагин Animate it!. Вам не надо ничего настраивать, в нем все выставлено как надо.
После этого создайте новую запись, и вы увидите в панели визуального редактора новую кнопку с надписью «Animate it!»:
При клике по ней появится всплывающее окно, в котором вы сможете задать свой стиль CSS анимации. Плагин поддерживает множество эффектов, так что вам будет из чего выбрать:
Перед тем, как добавить анимацию на сайт, необходимо выбрать ее стиль. После этого нужно выбрать время задержки анимации и ее продолжительность. И, наконец, нужно выбрать действие, при котором будет запускаться анимация.
Плагин предлагает три варианта: при клике мыши, наведении курсора мыши или прокрутке страницы:
Когда все это сделаете, нажмите на кнопку «Animate it», чтобы осуществить предварительный просмотр анимации.
Затем нажмите на кнопку «Вставить», чтобы добавить анимацию в запись или на страницу. Вы заметили, что плагин добавил шорткод с текстом примера в редакторе сообщений:
Вам нужно удалить содержимое внутри шорткода, и заменить его собственным текстом, изображениями или чем-то другим, что вы хотите анимировать:
После этого нажмите на «Сохранить» или «Опубликовать», а затем кликните по кнопке «Просмотреть». Вы увидите свой красиво анимированный контент.
Мы надеемся, что эта статья помогла вам узнать, как просто создать анимацию для сайта на WordPress.