Чи бачили ви на багатьох популярних сайтах красиву CSS анімацію? Такі анімаційні ефекти як ковзання контенту, спливаючі і розчиняються елементи і т. п. У цій статті ми розповімо, як без написання коду додати CSS анімацію в WordPress:

Коли і чому необхідно використовувати CSS анімацію?

Анімація для сайту привертає увагу користувачів до різних частин сторінки. Ви можете використовувати її для товарів або виділити кнопку заклику до дії.

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

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

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

Налаштування плагіна CSS Animate IT!

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

Встановіть активувати плагін Animate it!. Вам не треба нічого настроювати, у ньому все було як треба.

Після цього створіть нову запис, і ви побачите в панелі візуального редактора нову кнопку з написом «Animate it!»:

Як легко додати CSS анімацію в WordPress

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

Як легко додати CSS анімацію в WordPress

Перед тим, як додати анімацію на сайт, необхідно вибрати її стиль. Після цього потрібно вибрати час затримки анімації та її тривалість. І, нарешті, потрібно вибрати дію, при якому буде запускатися анімація.

Плагін пропонує три варіанти: при кліку миші, наведенні курсору миші або прокручуванні сторінки:

Як легко додати CSS анімацію в WordPress

Коли все це зробите, натисніть кнопку «Animate it», щоб здійснити попередній перегляд анімації.

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

Як легко додати CSS анімацію в WordPress

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

Як легко додати CSS анімацію в WordPress

Після цього натисніть «Зберегти» або «Опублікувати», а потім клацніть на кнопку «Переглянути». Ви побачите свій красиво анімований контент.

Ми сподіваємося, що ця стаття допомогла вам дізнатися, як створити анімацію для сайту на WordPress.

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