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

Опубликовано: 01.09.2018

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

SVG в HTML — из иллюстратора в браузер

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



Вы сможете анимировать практически все — от целых блоков до обычного текста. У плагина Animate It! имеется огромный выбор различных эффектов анимации. В статье « Примеры анимации » я давал ссылку на библиотеку стилей анимации в качестве демонстрации. Так вот, этот плагин включает в себя все эти шикарные эффекты и не требует возни с исходным кодом.


CSS анимация элементов при наведении

Некоторые особенности плагина Animate It!

Возможность выбора применять анимацию: по клику, по наведению Больше 50 эффектов анимации Добавлять анимацию в посты, страницы Есть возможность добавлять анимацию в виджеты, предварительно анимации с примером. Прочее.

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

После установки и активации плагина у вас в настройках появится новая вкладка «Animate It!». В ней содержится пару параметров о вкл/выкл анимации на смартфонах, таблетках. Главные настройки и управление находятся в визуальном редакторе.


Фиксированное меню (шапка) при прокрутке

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

Когда определитесь со всеми настройками и нажмете кнопку «Вставить» в статью добавится анимация с шаблонным примером.

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

rss