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

Плагины для WordPress WordSmall

плагин анимации

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

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

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

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

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

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

настройка плагина

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

plugin animate tools

tools animate

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

prive anim

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

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code