Как добавить анимированный GIF на WordPress. Как легко добавить CSS анимацию в вордпрессе Анимированное увеличение чисел плагин wordpress

От автора: сегодняшней темой у нас будет создание анимации для использования в блоге. В этой статье я хочу вам представить новый плагин WordPress для вставки интерактивного и анимированного контента в WordPress: Tumult Hype Animations for WordPress.

Дополнительное взаимодействие и функции экспорта

С помощью действия On Enter Viewport можно сделать так, чтобы анимация начиналась только, когда она видна. Сделать это так же легко, как выбрать выпадающий список в инспекторе Action.

Не ограничивайте себя только HTML5 экспортами проектов. Для обмена в социальных сетях можно легко экспортировать отдельные фреймы, анимированные GIF или даже видео прямо с Tumult Hype. Эти форматы экспорта можно использовать для изображений в постах WordPress как карточку Social Share на Twitter & Facebook или даже как видео тизер.

Технические примечания

Ниже представлено несколько технических примечаний о принципе работы плагина WordPress. Более подробно о Hype на странице Hype FAQ.

Все загрузки хранятся в папке wp-content в установке WordPress. Дополнительная серверная инфраструктура не нужна.

Вставляемый код – это JS код, не блокирующий рендер. Вместо вставки Hype анимации через DIV можно выбрать вставку через iframe. Этот способ предпочтительнее, если вам необходим доступ к коду, добавленному в head HTML файла Tumult Hype документа.

Легко отслеживайте события или взаимодействия с минимумом кода в Google Analytics. См. подробнее.

Считывайте переменные из поста WordPress и используйте их для управления анимацией: например, TolumneMeadowsRoad = closed;. См. подробнее.

Мы научились делать CSS анимацию элементов, используя библиотеки animate.css + wow.js . На этом уроке мы научимся как сделать тоже самое, но только на WordPress , как с плагином, так и без плагина.

Анимация при скролле без плагина

Сайт: https://github.com/matthieua/WOW
https://daneden.github.io/animate.css/

Как добавить в тему WordPress animate.css и wow.js и в дальнейшем применять их для анимирования элементов сайта?

Скачайте обе библиотеки

Создайте две папки: css и js

Положите в них animate.min.css и wow.min.js соответственно

Закачайте эти папки с файлами в вашу текущую тему на хостинге

Добавьте следующие строчки в functions.php , такой способ подключения считается безопасным, новые стили и скрипты регистрируются и ставятся в очередь. Вместо префикса twentyseventeen , вы пишите название вашей темы.

Регистрация и подключение animate.css и wow.js , используя событие wp_enqueue_scripts + Активация wow.js

В результате WordPress сам выведет ссылку в теге head на файл стилей с анимациями. Можно легко проверить, подключился ли файл, посмотрев на код страницы.

Самая сложная часть процесса сделана - стили и скрипты подключены, пора заняться самой анимацией. На сайте https://daneden.github.io/animate.css есть примеры всех анимаций, выбираете класс и прописываете название класса вместе с wow , к любому блочному элементу на сайте.

Здесь ваш текст, картинка, видео..

После всех выполненных шагов, анимация при скролле страницы на WordPress , будет 100% работать, проверено на личном опыте.

Плагин анимации для WordPress – Animate it

Сайт: https://ru.wordpress.org/plugins/animate-it

С помощью плагина Animate It можно делать такие же анимации, как и без него, который работает на тех же библиотеках. Только не надо ничего подключать в functions.php , а просто скачать и активировать.

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

Документация: https://www.downloads.eleopard.in/animate-it-documentation-wordpress/

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

Генератор: https://www.downloads.eleopard.in/class-generator-wordpress/

Одним словом, работать с Animate It легко и приятно. Но, не спешите, после прочтения статьи, идти по более легкому пути. В один прекрасный день, разработчик может бросить своё детище, перестать поддерживать, сделать плагин платным или вообще удалить. А при такой перспективе, осилить подключение библиотек правильным и безопасным способом, кажется более надежным способом. Тогда, вашей анимации ничего не угрожает, она будет работать всегда.

Доброго дня читателям. Наверняка вы не раз видели симпатичную 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», чтоб посмотреть привью анимации.

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

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

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

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