Главная / Плагины / Кастомизация / Как добавить CSS-анимацию на сайт
Как добавить CSS-анимацию на сайт

Как добавить CSS-анимацию на сайт

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

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

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

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

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

Давайте посмотрим, как можно легко добавить CSS-анимацию с помощью плагина CSS Animate! Данный плагин позволяет создавать CSS-анимацию, используя стандартный WYSIWYG-редактор.

Плагин Animate it!

Устанавливаем плагин Animate it! Он работает сразу после установки, и его не нужно настраивать дополнительно. Просто создайте новый пост или откройте уже готовый, и вы заметите новую кнопку ‘Animate it!’в вашем визуальном редакторе WordPress.

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

Animate It! Как добавить CSS-анимацию на сайт

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

Как только все настроено так, как вам нравится, вы можете смело жать на «Animate it», чтоб посмотреть привью анимации.

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

Animate It!

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

Animate It!

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

Используя специальный Class Generator вы можете создать анимацию, скопировать код и вставить его потом например, в виджет, в специальном поле.

Animate It! Добавление в виджет.

Animate It! 5

Страница плагина

Читайте по теме: Easy Textillate — анимация для блога

Тоже интересно!

Плагины для сайта ресторана, пиццерии или кафе

Плагины для сайта ресторана, пиццерии или кафе

Иметь закусочную, кафе или тем более, ресторан и не иметь при этом своего сайта, можно …

5 комментариев

  1. Мирослав

    Спасибо авторам WPNICE! Как всегда -очень полезная статья.

  2. Дмитрий

    Неплохая тема. Надо будет попробовать сделать у себя. спасибо)

  3. Сергей

    А этот плагин можно установить отдельно, локально у себя, но без использования вордпресса, а работая только со своими файлами html ?

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

      _____________________
      Для админа wpnice, сайтик периодически жутко тормозит, но это наверно хост колбасит. Дело не в этом, а вот в этом, автаризовывался и меня кинуло куда не должно редиректить по любом. На скрине конечно часть дабы… http://i.imgur.com/PfmV8lz.png. Стоит срочно менять то что на скрине и по логам сервера посмотреть что за фигня творится, походу должно быть в еррор логе куча ошибок. Плюс может сайтик подвисает из за умников, которые долбятся куда не надо, поотрубать это все.

      • Dmitry

        Спасибо. Как раз перебирался на новый хост. Отпишите впечатления через денек, другой. С редиректом уже разобрался, сейчас должно работать корректно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *