При разработке сайта на WordPress учитывается очень много различных тонкостей настройки – совместимость расширений, скорость загрузки ресурса, работоспособность и прочее. Помимо технической части нужно задумываться и о визуальной составляющей веб-сайта. Красивый дизайн, адаптивность – это все выглядит круто. Плагины анимации WordPress играют в создании такого необычного и красивого внешнего вида не последнюю роль. И иногда будет лучше, если вы добавите на свой сайт анимацию. Это небольшое дополнение делает интернет-ресурс гораздо интереснее и оживляет интерфейс.
Для того чтобы добавить анимацию, можно нанять разработчика, который все может сделать через код. Но гораздо лучше, быстрее и проще добавить визуальные дополнения с помощью специальных плагинов. Они позволяют самостоятельно настраивать анимацию без необходимости искать человека, который сделает эту работу.
Плагины анимации единым списком
- Kounter – обратите внимание: это не плагин, а тема
- Blocks Animation
- Scroll Triggered Animations
- Easy Textillate
- Image Hover Effects Ultimate
- Hover Effects
- Marvy
- Animations by Imoptimal
- AOS Animation
На данный момент, выпущено достаточно большое количество подобных расширений, каждое из которых имеет свои качества и преимущества. Мы же собрали лучшие из них в подборку. В этом списке вы точно должны выбрать то дополнение, которое идеально подходит для сайта. Если в этом топе нет того расширения, которое понравилось вам, можно посмотреть нашу предыдущую подборку для анимации первой половины 2020.
Kounter
Универсальный шаблон Kounter подойдёт при создании анимации на сайтах любых корпораций, агентств, ресурса для продаж в интернете и других направлений. Расширение появилось 10 января 2020 года. Клиенты, которые пользуются дополнением, оценивают его работу на 4,5 звезды. Несмотря на хорошую оценку, в первую очередь значение имеет пользовательский опыт. Можно привести пару комментариев пользователей о работе с расширением: “Помимо того, что человек из команды поддержки быстро помог мне устранить небольшой сбой, мне очень сильно понравилось само дополнение. Этот продукт очень прост в использовании, гибок и я быстро смог адаптировать его ко всем своим потребностям в самые короткие сроки”, “Служба поддержки работает просто идеально. Это очень хороший плагин, я доволен его удобством и гибкостью. Если вы ищете подобное расширение для своего веб-сайта, определено стоит купить этот продукт”. Разумеется, не все так гладко – комментариев нашелся и один негативный отзыв. Если выделить главное, то клиент пишет, что расширение понижает приоритет и скорость загрузки других плагинов, чтобы его работа была стабильной и беспрерывной. Можно назвать это минусом или нельзя – выбирать вам. Просто учитывайте такое поведение дополнения, когда будете устанавливать его для своего интернет-ресурса.
Стильный и элегантный Kounter предоставляет на выбор около двенадцати возможных вариантов фона (среди них есть и фоны с анимацией):
- статичное изображение – просто картинка, как и на любом сайте;
- сплошная заливка – заливка фоном любого цвета;
- градиентная заливка бэкграунда;
- слайдер с красивой анимацией отдаления картинки;
- видео с YouTube (в качестве фонового изображения можно поставить любое видео с этой платформы);
- частицы, которые двигаются в виде волн;
- анимация в виде звуковой волны и др.
Анимированные декорации можно быстро настроить под себя. Kounter позволяет изменить скорость анимации, цвет и непрозрачность фона, сделать наложение цвета и добавить другие параметры. Также есть возможность выбора версии с таймером обратного отсчета. Если говорить об остальных возможностях расширения, то можно отметить тот факт, что разработчик добавил формы для подписки на новостную рассылку, значки социальных сетей и другие фишки, посмотреть которые можно на странице дополнения.
Стоимость расширения 15 долларов. При такой сумме дополнение включает в себя не только красивую и аккуратную анимацию для фонового изображения. Kounter также имеет все необходимые параметры, чтобы создавать страницы сайта для отображения товаров, которые скоро поступят в продажу или для страниц, которые показывают, что интернет-ресурс находится в режиме обслуживания.
Blocks Animation
Дополнение Blocks Animation было создано для того, чтобы у пользователя была возможность быстро и без лишних препятствий анимировать некоторые элементы на своем веб-сайте. Плагин получил последнее обновление в августе 2020 года. Имея более 5 тысяч установок, Blocks Animation заработал рейтинг в 5 звезд. Пользователи очень хорошо отзываются о своем опыте работы с этим продуктом. Поэтому на странице плагина можно увидеть отзывы примерно такого содержания: “Мы имеем очень короткий список расширений, которые хотим использовать в своих проектах. Требования к плагинам очень строгие, поэтому не каждое дополнение туда попадает. Blocks Animation есть в этом списке. Это просто прекрасный продукт, который мы будем использовать в своих будущих проектах”.
Расширение работает на основе библиотеки animate.css, поэтому анимация выглядит плавной и красивой. При этом она работает стабильно и не доставляет неудобств. После установки дополнение интегрируется в Gutenberg. Gutenberg – это обновлённый редактор блоков WordPress. Не все плагины анимации WordPress могут работать с ним. То есть, точно таким же образом, как вы редактировали обычные блоки через панель администратора, можно анимировать элементы на сайте – всего за каких-то несколько кликов.
Особенности Blocks Animation:
- достаточно маленький вес и очень высокая скорость работы;
- для анимации используется библиотека animate.css;
- при настройке измененные эффекты можно просматривать в режиме реального времени;
- большое количество различных видов анимирования элементов;
- расширение простое в использовании.
Это бесплатное дополнение станет отличным решением для того, чтобы сделать веб-сайт более интересным и привлекательным. Для того, чтобы воспользоваться расширением, нужно всего лишь скачать его, установить и настроить анимацию прямо в панели администратора WordPress.
Scroll Triggered Animations
Удобный в использовании и простой в настройке плагин Scroll Triggered Animations поможет сделать красивые эффекты при прокрутке страницы. Расширением пользуются более 2 тысяч клиентов, и они довольны продуктом, о чем говорит рейтинг в 5 звезд. Такой отзыв оставил один из пользователей: “По умолчанию расширение дает на выбор просто невероятно красивые способы для анимации блоков моего сайта. Но я решил воспользоваться премиальной версией плагина, чтобы добавить более продвинутые эффекты на свой проект. Когда у меня не получалось разобраться с эффектами и добавить те, которые были нужны, команда поддержки клиентов быстро помогла мне решить проблему”
Как заявляет разработчик продукта, вам не нужно иметь много опыта в веб-разработке или знать языки программирования, чтобы полноценно использовать расширение. При помощи этого дополнения можно быстро настроить на сайте анимацию и сделать сайт более привлекательным и интерактивным.
Особенности Scroll Triggered Animations:
- расширение настолько простое в использовании, что разобраться с настройками может даже человек, который впервые видит WordPress;
- управление анимацией можно осуществлять глобально, без необходимости изменять эффекты на каждом элементе страницы отдельно;
- из коробки доступно свыше 25 невероятно красивых визуальных эффектов;
- с помощью дополнения вы можете самостоятельно создавать CSS анимации, если имеете навыки верстки сайтов.
Реализовать анимации, которые предоставляет это расширение можно без знаний JavaScript. Продукт не бесплатный. Если вы хотите использовать его один раз на своем сайте – можете купить версию для одного проекта за 25 долларов. Если у вас несколько проектов и на каждом необходим этот плагин – версия для неограниченного количества сайтов стоит 51 доллар.
Easy Textillate
Анимация текста – достаточно красивый прием на сайте. И очень хорошо, что есть специальные дополнения, которые позволяют добавить этот оригинальный визуальный элемент на ваш интернет-ресурс. Подойдут и другие плагины анимации WordPress, но Easy Textillate – тот самый продукт, который вам нужен. С его помощью можно наложить на текст элегантные визуальные эффекты и использовать их на страницах своего веб-сайта. Дополнение имеет рейтинг в 5 звезд и более 2 тысяч довольных клиентов. Вот отзыв одного из пользователей: “Работает без проблем и устраняет все неудобства, которые могут быть вызваны при работе с JavaScript. Само по себе анимирование текста через код иногда может не работать, но эту проблему как раз и решает Easy Textillate”.
Чтобы добавить эффекты напрямую в файлы темы можно использовать свои PHP-скрипты. Если вам нужно сделать анимацию, достаточно просто вставить шорткод в нужное место сайта и все. Easy Textillate использует несколько библиотек для визуальных эффектов.
Характеристики расширения:
- версия, доступная на данный момент – 2.01;
- последнее обновление было выпущено в августе 2020;
- поддержка локализации (это значит, что плагин можно перевести на любой язык);
- быстрая установка и очень простая настройка.
Продукт распространяется бесплатно. На странице Easy Textillate есть подробные инструкции по установке, настройке и дальнейшему использованию дополнения. Если вы все же столкнетесь с трудностями – можно обратиться к поддержке клиентов.
Image Hover Effects Ultimate
При помощи лёгкого плагина Image Hover Effects Ultimate вы можете за небольшой промежуток времени анимировать картинки на сайте. Расширение работает с использованием CSS, что делает его работу более стабильной и доступной к кастомизации. Дополнением воспользовались более 20 тысяч человек. Средняя оценка Image Hover Effects Ultimate – 4,5 звезды.
Расширение позволяет добавить на сайт удобные эффекты при наведении при помощи шорткодов. Этот плагин использует анимацию на чистом CSS3. Даже если человек совершенно не знает, как работать с кодом, он сможет использовать Image Hover Effects Ultimate на своем веб-сайте.
Преимущества дополнения:
- встроенный плагин Visual Composer и совместимость с Elementor Page Builder. Так как расширение работает с этими двумя визуальными редакторами, можно спокойно добавлять анимацию на блоки, сделанные через них;
- расширение работает на любых устройствах и поддерживает визуальные эффекты на сенсорных экранах;
- есть возможность клонировать эффекты с изображений. То есть, если вы сделали эффект для одного изображения, можно этот же эффект использовать и для других изображений на веб-сайте;
- для плагина был сделан интерфейс Live Preview для того, чтобы пользователи могли просматривать изменения эффектов в реальном времени;
- Image Hover Effects Ultimate позволяет использовать собственные стили CSS. Поэтому, если у вас есть знания верстки, можно самостоятельно делать кастомную анимацию;
- возможность автоматического выравнивания изображений средствами расширения;
- изображения загружаются на страницу при помощи расширенного менеджера. Он имеет некоторые функции, которые дают возможность сортировать изображения, делать обрезку, поворачивать и масштабировать их;
Дополнение поставляется сразу с несколькими демонстрационными эффектами при наведении. Комбинируя типы наведения, можно открыть новые функции. Image Hover Effects Ultimate поставляется сразу с 500 различными видами эффектов, каждый из которых имеет около 4 стилей. В список визуализаций входят: переворот, скольжение, масштабирование, затухание и другое. Не все плагины анимации WordPress могут таким похвастать.
Дополнение можно использовать бесплатно, но премиальная версия включает в себя гораздо больше функций и настроек. На странице плагина гораздо более подробно описано расширение, принцип его работы и прочее. Но эта информация больше подойдет для отдельного обзора.
Hover Effects
Hover Effects – еще одно дополнение для создания неповторимых эффектов при наведении для сайта. Все анимации, которые предоставляет расширение можно использовать по многу раз в самых разных частях сайта. Плагин используют более 5 тысяч человек. Его рейтинг – 5 звезд. Вот один из отзывов, оставленных пользователем дополнения: “Для меня это лучший продукт. Он очень прост в использовании и имеет поистине потрясающие эффекты. У меня возникла проблема – не выравнивались изображения после того, как я добавил эффект при наведении. Я обратился в поддержку и там мне быстро ответили и решили проблему”.
Для работы переходов, преобразований и анимаций используются возможности CSS3. Дополнение имеет более 39 эффектов при наведении на элемент. На странице плагина можно ознакомиться с полным списком эффектов (к ним относится пульсация, отскок, наклоны вперед и назад, колебания и другие).
Hover Effects совместим, и рекомендуется к использованию вместе с такими расширениями, как:
- Popup Box;
- Counter Box;
- Button Generator;
- Side Menu Lite;
- Wow Skype Buttons.
Расширение можно бесплатно скачать с его страницы. Так как эффекты при наведении – очень интересная составляющая часть сайта, то вы произведете хорошее впечатление на своих клиентов и посетителей интернет-ресурса.
Marvy
Как утверждает разработчик, Marvy – это лучшее решение для тех пользователей, которые хотят добавить на свой сайт красивые анимационные эффекты. Расширение имеет более 500 клиентов, которые оценили его на 5 звезд. Вот один отзыв о дополнении: “Различные стандарты и требования заставляют все сайты выглядеть одинаковыми. Поэтому, многие из нас упускают из виду тот факт, что сайт должен отличаться от других, быть уникальным. Как и другие плагины анимации WordPress для того, чтобы анимировать элементы на странице. Эти инструменты обогащают сайт, делают его привлекательнее и добавляют интерактивности. Этот плагин просто замечательный. С его помощью мы смогли реализовать все идеи, которые только у нас были. Работа с расширением была очень приятной, и оно очень сильно украсило веб-сайт. Я думаю, если это дополнение использовать в тех целях, для которых оно предназначено, будет настоящее чудо. Большое спасибо тем или тому, кто разработал этот плагин”.
Marvy содержит в себе очень большое количество функций и удобных элементов в разных стилях, которые помогут вам сделать сайт еще привлекательней при помощи анимации. После активации расширения, на выбор вам будут доступны 7 фоновых анимационных эффектов:
- анимация ряби;
- повороты объектов;
- анимация падения;
- летающие объекты;
- анимация волн;
- анимационный эффект с кольцами и другие виды.
При использовании этого бесплатного продукта учтите, что он разработан как дополнение для визуального конструктора Elementor. То есть без него он работать не будет. Если вас не устраивают базовые анимации расширения, разработчик выслушает все пожелания и добавит то, что захотят пользователи.
Animations by Imoptimal: другие плагины анимации WordPress будут получше
Подчеркнуть наиболее важные элементы на сайте можно при помощи хорошей и красивой анимации. Анимацию можно сделать так, чтобы она показывалась при входе на сайт, при наведении курсора мыши на элемент или же при нажатии на него. Все это можно реализовать при помощи мощного плагина, такого как Animations by Imoptimal. Это дополнение включает в себя более 70 различных типов анимации, для реализации которых используется библиотека animate.css.
Animations by Imoptimal нельзя назвать популярным продуктов. Во всяком случае другие плагины анимации WordPress более известны. Он имеет больше тридцати установок и одну оценку в 5 звезд. Но ему определенно стоит дать шанс проявить себя. Вот, например, отзыв одного из пользователей: “Это именно то, что я искал. Простой, но очень мощный плагин с хорошо настраиваемым интерфейсом”.
Используя дополнение, вы можете установить свою продолжительность визуальных эффектов, количество повторений, задержку и множество других параметров.
Здесь вы можете прочитать основные характеристики Animations by Imoptimal:
- возможность добавить элементы, которые анимируются только когда они в области просмотра;
- режим предварительного просмотра для отслеживания изменений и настройки эффектов;
- запуск анимирования элементов при нажатии на них (на сенсорных экранах) или при наведении курсора мыши.
В общем, этот небольшой плагин позволит вам разнообразить свой сайт и добавить анимацию. Благодаря эффектам анимации, которые предоставляет Animations by Imoptimal можно сделать безупречный сайт, который определенно понравится посетителям этого интернет-ресурса.
AOS Animation
AOS Animation – это расширение, которое было разработано для того чтобы можно было делать анимацию для страниц, сверстанных при помощи Site Origin Page Builder. Плагин сделан на основе бесплатной библиотеки анимации AOS. С помощью расширения можно выбрать многие параметры анимирования. Среди них есть следующие опции:
- тип анимации;
- то, сколько будет длиться эффект;
- задержка перед началом анимирования и т.д.
Дополнение имеет более 3 тысяч пользователей и оценку в 5 звезд. Вот пример одного из отзывов о AOS Animation: «Анимация, которую используют там, где она уместна очень хорошо украшает страницу. Это расширение очень хорошо работает на страницах, которые были сделаны при помощи Site Origins».
В общем, если подвести итог и кратко рассказать об AOS Animation, то этот плагин сделан как дополнение Site Origin, расширяющее возможности этого конструктора. Если вы пользуетесь SiteOrigin Page Builder, то это расширение как раз то, что вам нужно для добавления анимации на сайт.
Что еще можно сказать про плагины анимации WordPress?
Это были плагины анимации WordPress. Все расширения из списка проверены на качество и были взяты с официальных ресурсов. Каждый плагин из подборки имеет свои особенности. Единственное, что осталось сделать вам – выбрать дополнение, которое больше всего подходит для вашего сайта, установить его и начать пользоваться. Если же в этой подборке вы не смогли выбрать необходимое расширение, здесь можно посмотреть подборку расширений для анимации на сайте за первую половину 2020 года.