Для создания анимации на WordPress сайте существует несколько методов, включая использование плагинов и отдельных скриптов. Оба варианта не являются сложными, но плагины обычно более автоматизированы специально для работы с WordPress.
В этой статье мы рассмотрим, как можно сделать анимацию иконок на WordPress, блоков и других веб-элементов. А также изучим возможности анимации блоков при прокрутке страницы, что позволит создавать классные анимационные эффекты как для лендингов, так и для других типов сайтов.
Animate It! – плагин анимации WordPress
Это именно тот плагин, который позволит нам добавить анимацию на WordPress при различных событиях, таких как наведение курсора, клик или скроллинг страницы. Он включает в себя более 50 эффектов анимации входа и выхода, используя две популярные библиотеки CSS — Animate.css и Animo.js.
Некоторые особенности:
- Больше 50 эффектов анимации.
- Применение анимации при прокрутке, клике и при наведении.
- Возможность отключать анимацию на смартфонах и планшетах.
- Настройка «кривой» анимации (CSS Cubic Bezier).
Как добавить анимацию в WordPress
После активации плагина вы увидите новую вкладку «Настройки — Animate It!» в меню. Здесь вы можете выбирать, на каких устройствах включить или выключить анимацию, а также добавить собственные стили CSS. Всё это можно оставить по умолчанию, за исключением выбора устройств, это уже на ваше усмотрение.
Добавляем анимацию через визуальный редактор
Перейдём к главному этапу – созданию CSS-анимации с помощью инструмента плагина «Генератор анимации». Откройте страницу или статью для редактирования, и в визуальном редакторе вы найдёте иконку плагина.
Шаг 1. Сначала выделите элемент в редакторе, который требуется анимировать, и затем нажмите кнопку «Animate It!».
Шаг 2. Появится генератор анимации с различными параметрами. Вы можете выбрать скорость анимации, её эффект появления и исчезновения, выбрать событие анимация, при котором она должна активироваться, такие как клик, наведение курсора (hover) или скроллинг.
Шаг 3. После настройки всех параметров нажмите кнопку «Вставить». В результате выбранный элемент будет автоматически обернут в код с настройками анимации.
Анимация в редакторе Gutenberg
В описании плагина утверждается, что в нем предусмотрен специальный блок для редактора Gutenberg. Я просмотрел все настройки, каждый блок, но даже близко не нашел никакой дополнений от плагина Animate It!.
Поэтому я хотел бы предложить альтернативный метод применения анимации с использованием этого плагина в редакторе Гутенберг. Этот метод может быть применен к любым блокам на сайте, так как он основан на использовании классов. Они, в свою очередь, могут быть сгенерированы с помощью онлайн-генератора анимации. Давайте рассмотрим это более подробно.
Шаг 1. Откройте генератор анимации классов и создайте анимацию, выбирая желаемые параметры, такие как эффект, скорость и прочее.
Шаг 2. После настройки параметров нажмите кнопку «Генерировать». Появится модальное окно, в котором нужно скопировать сгенерированный CSS-класс для анимации.
Шаг 3. Откройте редактор Gutenberg и выберите элемент, к которому вы хотите добавить анимацию. Затем перейдите к панели справа и выберите вкладку «Блок». В разделе «Дополнительно» найдите опцию «Дополнительные CSS-классы». В это поле вставьте ранее скопированный класс из генератора анимации. После этого сохраните внесенные изменения.
Таким образом, вы сможете добавить анимацию к любому элементу на вашем сайте с использованием сгенерированных классов.
Если вы перейдете в раздел «Внешний вид – Виджеты» и выберете любой из них, вы заметите, что этот плагин добавил новое поле для вставки специально таких классов. Это позволит вам анимировать виджеты в WordPress.