Need help? Chat now!

Hostwinds Блог

Результаты поиска для:


Бесплатные плагины WordPress для добавления анимации на ваш сайт Популярное изображение

Бесплатные плагины WordPress для добавления анимации на ваш сайт

от: Hostwinds Team  /  май 5, 2017


Анимации в веб-дизайне могут значительно улучшить опыт вашего пользователя.Сегодняшний сайт анимация не совсем подобна индуцированию головной боли, ярко-зубчатой анимации в первые дни Интернета.Хорошо спроектированные и размещенные анимации могут обеспечить тонкие, но прозрачные визуальные подсказки.Они могут разбить монотонность или помочь переходить пользователям из одного раздела вашего сайта к следующему гладко.

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

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

Когда вы закончите, проверяя их, вы также можете быть заинтересованы в этих других сообщениях WordPress:

.htaccess советы по безопасности WordPress

Плагин предварительного просмотра общедоступных сообщений

Анимируйте это!

Этот плагин, вероятно, самый популярный, так как в настоящее время он имеет более 300 000 активных установок.Потому что это настолько прочная, но простая в использовании, оно становится красивой здесь в верхней части этого списка.Вы можете выбрать более 50 различных анимационных стилей входа / выхода / обращения с обращением, которые используют библиотеки Animate.js и Animo.css.

Он добавляет новый значок в ваш WYSIWYG-редактор, который позволяет быстро вставлять и настраивать анимацию.

WP Анимированные переходы страниц

Есть много плагинов там и много разных эффектов, которые вы можете добавить на ваш сайт.Чтобы покрыть их все будет написать книгу.Таким образом, мы посмотрим на несколько из них в нескольких разных категориях.Первые плагины мы посмотрим, давайте добавим переходы на свои страницы, когда посетители приземляются или оставьте страницу.

Анимация страниц и переходы

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

Я кратко проверил его на персональном сайте, используя Samsung Galaxy и смог увидеть, что они имеют в виду.Переход отличный и хорошо работает.Но, похоже, если ваш палец охватывает на ссылку, просто слишком долго, пытаясь прокрутить, он будет взять вас в эту ссылку.Первый раз это произошло, я видел, что они имели в виду.Но когда я хотел сделать это снова, мне пришлось более целенаправленно приостановить палец на ссылку.

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

Эффекты загрузки страницы

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

Интересный факт ... Разработчик специально благодарит Тобиас Аглин, ведущий опыт дизайнера в Моджан (Minecraft любого?).Но он не говорит точно, что, если какая-либо роль, Аглин специально играл в создании плагина.Демо ниже размещена на своем сайте.

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

Посмотрите демо Вот.

Эффекты изображения и анимация

Окончательные эффекты наведения

Предположим, вы хотите добавить интересные эффекты захвата внимания на подписи изображения. В этом случае ультиматские эффекты зависания зависят от. Там, кажется, только один стиль с семью различными эффектами, доступными в настоящее время для бесплатной версии. Если вы хотите заплатить за премиальную версию ($ 11), вы можете получить еще много стилей с различными эффектами для каждого. Это также позволяет вам использовать пользовательские цвета шрифта / размеры и стили CSS, поставляется с 600+ Google шрифтами, и вы можете добавить внешние ссылки на ваши подписи.

Вы можете увидеть демонстрацию всех различных эффектов Вот.

Удивительные эффекты наведения

Этот привлечен вам теми же людьми, что и конечные эффекты наводчика - Themebon.Однако у него есть свои различия.Этот плагин имеет больше анимаций, включая эффекты вокруг границы изображения и различные формы стили.Форма круга - это форма, которую вы получаете в бесплатной версии.И снова это $ 11 для Pro версии.

Другие функции, ограниченные данной версией:

  • Фоновый цвет
  • Размер изображения
  • Удалить границу
  • Удаление подчеркивания заголовка
  • Открытие ссылок в новой вкладке
  • Позиционирование
  • Пользовательские шрифты
  • Пользовательские цвета и шрифты для заголовков / описаний
  • Отзывчивый

Вы можете посмотреть живую демонстрацию этого Вот.

Эффекты наведения на изображение

Да, еще один плагин эффектов зависания изображения.И да, он предлагает различные взгляды и стили, чем предыдущие два.Тем не менее, у него есть некоторые странно похожие функции и видят и почувствуют себя на панели администратора, даже если это не тот же разработчик.Он также имеет много одинаковых функций, заблокированных за Pro версии, но есть довольно много анимированных эффектов, которые предлагаются бесплатно.

Вы можете увидеть демо для этого Вот.

Текст и анимация заголовков

Легкий текстиллят

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

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

И конечно, вы, вероятно, можете настроить код самостоятельно, но если вы хотите беспокоить с кодом, вы, вероятно, не смогут смотреть на эти плагины.Верно?

CSS3 Вращающиеся слова

Добавьте несколько пиазов в свои заголовки без перенапряжения.CSS3 Вращающиеся слова позволяют вашему тексту автоматически вращаться через данный набор слов с, очевидно, CSS3.Это на основе Ajax, поэтому это просто и быстро.Выберите несколько описательных прилагательных, выберите ваши варианты стиля и насколько быстро они должны вращаться.Сохранить настройки, схватить шорткод, поместите его в свой пост и позвольте ему погибнуть в вашем предложении.

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

Наконечник: Когда вы добавляете вращающиеся слова, разделенные запятой в поле, включите пространство после каждого слова (до запятой).В противном случае между вращающимся словом и остальным предложением не будет пространства между вращающимся словом и остальным предложением.

Анимированный заголовок

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

[Анимированный заголовок заголовка = «Я хочу анимировать» Animated_Text = «Это, этот текст, здесь« анимация = «клип»]

В этом примере:

  • Я хочу оживить текст перед анимированными / вращающимися словами
  • Этот текст, вот слова, которые нужно вставлять и убирать
  • Клип - это тип анимации, который вам нужен

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

Разное. Анимации

Следующий плагин не был на самом деле не поместился в другие разделы, поэтому мы просто добавим его здесь.

Прокрутите страницу до идентификатора

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

Вывод

Мы покрывали небольшую часть многих плагинов, которые могут помочь вам добавить анимационные эффекты на WordPress.И все здесь тоже бесплатные.Пока вы не хотите проходить анимацию-сумасшедшие на вашем сайте, делая это правильно, может облегчить использование вашего сайта для использования и красивого.Для более проницательности, советы, идеи и вдохновения Статья Ника Бабича об анимации в современном веб-дизайне.

Что вы думаете о сегодняшних тонких анимациях?У вас есть какие-либо отличные примеры этого на практике?Если вы нашли этот пост полезным, пожалуйста, не забудьте поделиться.

Написано Hostwinds Team  /  май 5, 2017