Вячеслав и Валерия : Интересные плагины Wordpress 1015 Комментариев к записи Как легко добавлять анимацию CSS в WordPres без кодирования нет

Как легко добавлять анимацию CSS в WordPres без кодирования

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

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

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

Настройка анимации CSS

Мы будем использовать плагин Animate it для этого урока. Это один из плагинов, который поможет вам легко добавить анимированный эффект CSS на ваше детище. Самое лучшее в этом плагине – это то что вам не нужно его настраивать. Вот некоторые его особенности:

• Есть возможность применять анимацию CSS3 для сообщений, виджета и страниц
• Возможность применения анимации в Scroll
• Можно добавлять различные сдвиги прокрутки на отдельные блоки анимации
• Возможность применения анимации при клике
• Есть функция задержки анимации
• Предоставление кнопки в редакторе
• Есть функция Generator для генерации необходимых классов анимации
• Есть возможность применять анимацию бесконечно или любое фиксированное количество раз
• Возможность добавления пользовательских классов CSS в отдельный блок анимации

Это лишь малая доля, на что способен этот плагин.

Шаг 1

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

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

Шаг 2

Существуют три типа настроек. В настройках «Entry» вы можете выбрать тип анимации, время задержки или продолжительность времени, в которое должна отображаться анимация. Чтобы увидеть изменения, нажмите кнопку «Animate it». 

Шаг 3

В настройке «Exit» вы можете настроить параметры выхода, как это сохраните все настройки. 

Шаг 4

Заключительная вкладка состоит из 4 настроек этого плагина:

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

После этого сохраните настройку, нажав кнопку «Insert».

Шаг 5

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

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

Заключение

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

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

Выполните описанные выше шаги, и через минуту у вас будет анимированный контент на вашем веб-сайте. Ну что у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!