Как добавить CSS анимацию в WordPress

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

Когда и зачем вам стоит использовать CSS анимацию

CSS анимация позволяет вам привлекать внимание пользователя к различным элементам на вашей странице.

Вы можете использовать ее для анимации преимуществ товара или же кнопки призыва к действию.

Многие сайты используют CSS анимацию по мере того, как пользователь прокручивает страницу. Такой подход добавляет элемент повествования на страницу, наряду с анимацией элементов по ходу прокрутки.

CSS анимация также работает намного быстрее, нежели элементы flash или видео. Она загружается быстрее и поддерживается большинством современных браузеров.

Можно добавлять анимацию вручную в таблицу стилей своей или дочерней темы WordPress. Однако, большинство новичков не желают редактировать файлы своей темы и тратить время на изучение CSS.

Давайте же рассмотрим, как можно легко добавлять CSS анимацию на свой WordPress сайт.

Настраиваем плагин Animate!

Мы будем использовать плагин для достижения цели. Этот плагин позволит вам создавать CSS анимации, используя редактор WYSIWYG.

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

Просто создаем новую запись, где замечаем новую кнопку в своем визуальном редакторе WordPress под названием ‘Animate it!’.

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

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

Плагин предлагает три варианта. Можно запускать анимацию по клику, при наведении или же при прокрутке.

Как только вы закончите с настройкой, можно нажать на кнопку Animate it для того, чтобы увидеть анимацию в действии.

Далее. кликаем на кнопку «insert» для того, чтобы добавить анимацию в свою запись или на страницу WordPress. Вы заметите, что плагин добавил шорткод с каким-то содержимым внутри в редактор записей.

Нужно будет удалить контент, добавленный плагином в шорткод, и заменить его на свой собственный текст, изображение или что-то другое, что нужно анимировать.

Теперь, когда настройка окончена. нажмите на кнопку Опубликовать запись, а затем кликните на «Просмотреть». Вы увидите свой, красиво анимированный контент.

Мы надеемся, что эта статья помогла вам научиться легко добавлять CSS анимации в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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