В процессе создания сайта важно уделить внимание небольшим, но важным особенностям. Одна из них — анимация и эффекты на сайте WordPress. Они улучшают пользовательский опыт, помогают обращать внимание посетителей на важные элементы, делают страницы красивее, привлекательнее, необычнее. Анимации можно добавить ко всему, будь то кнопка регистрации или картинка.
Кстати
Вторая часть подборки находится здесь
Чтобы не создавать эффекты самостоятельно и не нанимать дизайнеров и программистов, можно использовать специализированные премиальные плагины. Эти дополнения позволяют добавлять эффекты в пару кликов, поскольку легко устанавливаются в WordPress и разработаны таким образом, чтобы справиться с их настройкой смог даже начинающий вебмастер.
Плагины из статьи единым списком
- WP Click Effects
- Image Hover Effects
- Lottie Image Animation
- WP Animated Buttons
- Background Gradient Animation
- Page Loading Progress Bar
- Laser Loader
- Image Caption Hover Pro
- Highlighter
- Custom Cursor – больше не поддерживается, хотя доступен к продаже
- DAWS-WP
- Title Animo
В этой статье собраны лучшие плагины для анимации на сайте первой половины 2020 года. Это самые новые и интересные инструменты WordPress с большим количеством эффектов. Каждый из них используется для добавления анимаций к каким-то определенным элементам сайта, поэтому вы сможете выбрать только те, которые подходят для конкретного проекта.
WP Click Effects
Небольшой плагин WP, вышедший 26 марта 2020 года. Его название говорит само за себя — инструмент предназначен для добавления анимации к каждому клику пользователя на сайте. В комплекте поставляется набор эффектов для разных случаев.
Особенности дополнения WP Click Effects для WordPress:
- гибкая настройка анимаций, чтобы они идеально подходили к проекту;
- эффекты созданы на HTML+CSS, а значит, автоматически масштабируются и красиво выглядят на любом устройстве с экраном любого размера;
- можно выбрать различные анимации для разных частей сайта;
- плавные, быстрые эффекты, повышающие качество пользовательского опыта при времяпровождении на страницах вашего проекта.
WP Click Effects стоит $14. В комплекте поставляется полугодовой доступ к службе поддержки разработчика, поэтому если возникнут проблемы во время использования, можно будет бесплатно проконсультироваться.
Image Hover Effects
Поступивший в продажу 26 июня 2020 года плагин анимации, который вы можете проверить в действии одним из первых. Однако, обратите внимание: для его использования нужно, чтобы к вашему сайту на WordPress был подключен редактор Elementor. Без него дополнение не работает.
Посредством плагина, вы сможете размещать в любом месте сайта изображения, накладывая на них заголовок, описание, и конечно же, анимации. Большую часть последних составляют эффекты наведения. Их доступно более 30 разновидностей. Также можно настроить рамки, шрифты, цвета наложения, поля и другие параметры изображений. Таким образом, инструмент имеет сразу 2 основных функции:
- размещение изображений на страницах сайта;
- добавление к ним эффектных анимаций, привлекающих внимание и делающих посещение проекта приятнее для пользователей.
Цена дополнения для ВордПресс Image Hover Effects — $24. В нее входят 6 месяцев поддержки, в течение которых можно будет бесплатно обратиться за помощью к специалисту.
Lottie Image Animation
Плагин ВордПресс, который как и предыдущий, работает только в связке с определенным конструктором, а конкретно — WPBakery Page Builder (Visual Composer). Если вы пользуетесь этим инструментом или готовы его подключить, тогда инструмент вам подойдет. Он вышел 21 мая 2020 года. Это дополнение, открывающее доступ к большой библиотеке анимированных картинок и способам их внедрения на сайт.
Вам не придется работать с кодом, более того — изображения с анимациями устанавливаются буквально в пару кликов. Вам нужно лишь выбрать их на специальном веб-сайте, среди множества заготовок от профессиональных дизайнеров. Анимации можно использовать без ограничений — устанавливайте на сайт столько картинок, сколько вам нужно.
Достоинства Lottie Image Animation для ВордПресс:
- несколько тысяч креативных анимаций;
- гибкая настройка цвета фона, высоты и ширины изображения, скорости анимации, циклического воспроизведения;
- установка двумя способами — с помощью URL картинки или скачивания ее файла и загрузки через админ-панель ВордПресс;
- можно использовать собственные анимации, либо взятые из других источников, не связанных с плагином;
- подробная документация, которая поможет даже новичку в ВордПресс разобраться, как работает продукт;
- код оптимизирован для SEO, поэтому не помешает вашему поисковому продвижению;
- адаптирован для мобильных устройств;
- в течение полугода после покупки разработчик готов консультировать вас, если будут появляться затруднения во время установки анимаций или самого продукта.
Lottie Image Animation стоит $9.
WP Animated Buttons
Еще один плагин ВордПресс, для использования которого нужен конструктор WPBakery Page Builder. Поступил в магазин 20 апреля 2020 года. Его назначение — установка на ваш сайт анимированных кнопок, гибко настраиваемых в соответствии с особенностями проекта. Дополнение простое в использовании, имеет понятные текстовые инструкции, осваивается за считанные минуты.
Особенности WP Animated Buttons для ВордПресс:
- 20 разновидностей кнопок с анимациями;
- 22 вида фоновых анимаций;
- 3 размера кнопки;
- неограниченные возможности по настройке цвета кнопок;
- множество сочетаний цвета+анимаций+размера кнопки+фона позволяют реализовать любую задумку, подобрав оптимальный вариант для конкретного сайта и раздела.
WP Animated Buttons стоит $14. Как и у других премиальных плагинов, у него есть 6 месяцев поддержки от разработчика, поставляющихся в комплекте.
Background Gradient Animation
Небольшой WordPress-плагин, для применения которого в работе нужен конструктор Elementor. Вышел 14 апреля 2020 года. Позволяет создавать плавные интерактивные анимации градиентов. Предлагает все возможные настройки. Например, можно выбрать сам тип анимации или ее скорость. Устанавливать графические элементы можно на фон сайта, в качестве разделения разных элементов на странице и для реализации многих других сценариев. С его помощью вы сможете сделать проект более ярким, красочным и мгновенно привлекающим внимание зашедшего пользователя к каким-то конкретным составляющим страницы.
Особенности Background Gradient Animation для ВордПресс:
- несколько типов анимаций: диагональный градиент, слева направо, радиус;
- можно сочетать анимацию со слайдшоу или изображением;
- наложение масок изображения.
Цена Background Gradient Animation — $16. В течение полугода после покупки возможно обращение к разработчику за консультацией, в случае появления затруднений в процессе настройки дополнения.
Page Loading Progress Bar
Плагин, который добавит на ваш ВордПресс-сайт ставший в последнее время особенно популярным индикатор загрузки страницы. Опубликован 10 апреля 2020 года. Инструмент автоматически определяет, на сколько процентов загрузилась страница, и отображает эту информацию в графическом виде в ее верхней части. Хотя, последнее необязательно — индикатор можно разместить вообще в любом месте, благодаря соответствующей настройке, добавленной разработчиком.
Плагин для WordPress будет полезен практически для любого сайта, поскольку создает впечатление, будто страница загружается быстрее, чем на самом деле. Также он позволяет пользователю, зашедшему с мобильного телефона с плохим интернет-соединением, видеть прогресс загрузки, что поможет ему понять, что сайт действительно прогружается, и весь контент отобразится, если еще немного подождать. Дополнение одинаково хорошо отображается со смартфонов, планшетов, настольных компьютеров, а также совместимо со всеми популярными версиями браузеров. Работает в любых темах ВордПресс.
Достоинства плагина Page Loading Progress Bar для WordPress:
- гибкая настройка расположения индикатора, его цвета, высоты;
- оптимизирован для работы посредством редактора Гутенберг;
- прост в установке и использовании;
- подробная документация по настройке, которая поможет освоить продукт даже начинающим вебмастерам.
Page Loading Progress Bar для ВордПресс стоит $15. 6 месяцев поддержки от разработчика прилагаются.
Laser Loader
Еще один плагин, добавляющий индикатор загрузки страницы. Опубликован 15 марта 2020 года. Инструмент весит меньше 5 KiB, поэтому грузится мгновенно, каким бы плохим не было соединение с интернетом. Благодаря этому, он появляется раньше всех остальных элементов страницы и наглядно демонстрирует в виде анимации скорость их загрузки.
Тонкая линия анимации, добавляющаяся на сайт посредством этого плагина, будет наложена поверх содержимого раздела, прямо под панелью инструментов браузера. Можно изменить расположение, перенеся индикатор в нижнюю часть страницы, если это будет лучше для вашего проекта.
Особенности Laser Loader для ВордПресс:
- можно выбрать любой цвет;
- множество настроек, от толщины линии до ее скорости;
- возможно использование собственного CSS, чтобы придать анимации идеальный вид;
- поддерживается замедление анимации;
- совместимо с RTL-сайтами — индикатор может показывать загрузку не слева направо, а справа налево;
- внесение настроек в работу плагина без работы с кодом;
- автоматическое определение процента загрузки страницы и мгновенное отображение соответствующей информации в индикаторе;
- полная адаптивность, обеспечивающая корректное функционирование на всех устройствах, от смартфонов до компьютеров;
- пожизненные бесплатные обновления, которые обеспечат совместимость со всеми новыми версиями браузеров.
Цена Laser Loader — $15. Разработчик отмечает, что его служба поддержки помогает вебмастерам с решением любых проблем, а также обращает внимание покупателей на документацию, прилагающуюся к плагину и позволяющую легко его освоить.
Image Caption Hover Pro
Вышедший 18 марта 2020 года плагин ВордПресс, который также как и один из предыдущих, предлагает возможность наложения на изображения множества анимационных эффектов. На момент написания статьи их доступно более 200. Дополнение легко осваивается. Помимо наложения анимаций, позволяет накладывать текст, музыку, звуки. Все это сделает сайт более интерактивным, улучшит пользовательский опыт, поможет дольше удерживать посетителей.
Достоинства плагина для анимации на сайте Image Caption Hover Pro:
- совместимость со всеми популярными браузерами;
- эффекты наведения на любой вкус, их даже нет смысла перечислять — разработчик подготовил все возможные разновидности;
- наложение звуков, проигрывающихся при наведении на изображение, помогут лучше передать его атмосферу и предназначение;
- можно добавить скрытые надписи, которые будут отображаться при наведении на картинку, но не будут видны на самой странице сайта;
- 6-месячный доступ к техподдержке, помогающей вебмастерам оперативно решать любые проблемы, поставляется в комплекте.
ВП-плагин Image Caption Hover Pro для добавления анимаций при наведении на изображения стоит $16.
Highlighter
Еще один плагин для ВордПресс, работающий только в связке с инструментом Elementor, поэтому перед покупкой стоит убедиться в том, что вы используете именно этот конструктор. Поступил в продажу 13 марта 2020 года, совместим с редактором Gutenberg. Позволяет эффектно выделять заголовки постов и страниц, в т.ч. с использованием более 20 анимаций. Это делает контент более привлекательным для посетителей и повышает шанс того, что пользователь обратит на него внимание.
Настройка анимаций заголовков осуществляется прямо в интерфейсе Elementor, поэтому с ней справится даже начинающий вебмастер ВордПресс, тем более, что работать с кодом для внедрения возможностей дополнения не потребуется. Эффекты одинаково хорошо отображаются во всех популярных браузерах и при открытии сайта с любых устройств, от мобильных телефонов до настольных ПК.
Особенности плагина для добавления анимаций к заголовкам Highlighter:
- уникальные анимации, разработанные специально для плагина;
- 5 готовых шаблонов, которые можно применить мгновенно;
- можно настроить собственные шаблоны, выбрав шрифты, цвета, фоны, границы и многое другое;
- можно обработать также и дополнительный заголовок;
- дружественный для SEO-продвижения код;
- современная панель администратора, легкая в освоении;
- установка за 5-10 секунд;
- совместим с RTL.
Цена Highlighter — $9. В комплекте поставляется документация, подробно описывающая все этапы настройки анимации заголовка с помощью этого плагина, а также полугодовой доступ к техподдержке разработчика, готовой проконсультировать вас по любому вопросу.
Custom Cursor
Небольшой плагин для ВордПресс, вышедший 5 марта 2020 года. Заменяет стандартный пользовательский курсор мыши на уникальный и необычный. Такое решение нечасто используется на сайтах, поэтому удивляет пользователей, что улучшает их лояльность к проекту.
Особенности ВП-плагина для анимации курсора Custom Cursor:
- 6 пресетов анимации курсора, что позволяет выбрать оптимальный для вашего сайта на ВордПресс вариант;
- простота модификации — вы можете изменить готовые пресеты на свое усмотрение, чтобы сделать их идеально подходящими к дизайну проекта;
- быстрая установка;
- служба поддержки, к которой у вас будет 6 месяцев бесплатного доступа, работает круглосуточно и 7 дней в неделю, поэтому в любой момент можно быстро проконсультироваться, если появятся вопросы касательно плагина.
Цена Custom Cursor для WordPress — $13.
DAWS-WP
Плагин для добавления динамической анимации при прокрутке сайта, созданного на ВордПресс. Вышел 18 февраля 2020 года. Разработчик позаботился о том, чтобы инструмент был максимально легким и простым, поэтому он мало весит и не нагружает проект. С помощью плагина вы сможете существенно улучшить сайт, сделав его более привлекательным и необычным.
Достоинства DAWS-WP — плагина динамической анимации при прокрутке сайта:
- множество анимационных эффектов появления различных элементов сайта;
- возможность отредактировать анимации по своему вкусу без работы с кодом;
- большое количество настроек;
- удобный конструктор, позволяющий создавать, изменять и проверять собственные анимации;
- автоматическая задержка позволяет избавиться от ручной установки задержки появления каждого элемента, однако последний вариант тоже доступен для использования;
- в будущих обновлениях разработчик обещает расширить количество доступных анимаций и разделить их на категории, а также добавить шаги анимации, чтобы сделать эффекты более разнообразными и многоуровневыми.
DAWS-WP для ВордПресс стоит $14.
Title Animo
ВП-плагин, выпущенный через неделю после наступления 2020 года — 8 января. Позволяет использовать функцию, которую в последнее время стали применять на сайтах довольно редко, а именно — анимированные заголовки страниц. Ее особенность в том, что на вкладке вашего проекта в браузере, будет не просто статичный текст, а бегущая строка. Это привлекает внимание пользователей, а также напоминает о вкладке с вашим сайтом, пока пользователь изучает контент на других вкладках.
Особенности плагина для анимаций заголовков страниц Title Animo:
- мало весит (24 KB);
- совместим со всеми популярными браузерами;
- 4 типа анимации: бегущая строка, печатная машинка, чередование слов, необычное появление символов;
- можно самостоятельно выбрать текст, который будет отображаться, а также настроить скорость анимации.
Цена Title Animo для ВордПресс — $14. Разработчик предоставляет 6 месяцев доступа ко квалифицированной техподдержке, а значит, если возникнут проблемы с использованием плагина, можно будет бесплатно проконсультироваться и получить помощь в разрешении затруднения.
Подводя итоги
Все представленные в подборке плагины для анимации на сайте созданы опытными разработчиками. Это премиальные инструменты для ВордПресс, выбирая которые, вы можете на 100% быть уверены в том, что их функционал соответствует описанию и поможет решить поставленные задачи. Одно из ключевых достоинств платных плагинов из проверенного магазина (только такие мы и рекомендуем в своих статьях) — полугодовой доступ к службе поддержки. Это дает возможность бесплатно консультироваться и оперативно решать любые возникающие во время работы с дополнением проблемы.