Как добавить классную анимацию CSS3 в ваш контент WordPress

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

Современный веб-контент должен быть интерактивным и включать в себя различные медиа, а также старый добрый простой текст. Некоторые инструменты могут помочь нам поднять наш рассказ на несколько ступеней выше. А если вы пользователь WordPress, вы можете использовать Animate It! плагин для добавления классной анимации CSS3 в ваш контент.

Какие есть возможности?

Наряду с HTML5, CSS3 - это аббревиатура, связанная с современным веб-дизайном. Вкратце, CSS - это веб-компонент, который позволяет пользователям контролировать внешний вид веб-страницы, такой как макет, положение, шрифт, цвет и т. Д. Его последнее воплощение, CSS3, достаточно умен, чтобы позволить пользователям создавать изображения и анимацию, используя коды.

оживить-mte-example

К счастью, вам не нужно быть программистом, чтобы использовать CSS3 на своем сайте WordPress. Анимация! Плагин позволяет применять анимацию CSS3 к сообщениям, виджетам и страницам одним нажатием кнопки в редакторе. Кроме того, пользователи могут управлять триггерами. Например, они могут применять анимацию при прокрутке, щелчке и наведении, а также добавлять различное смещение прокрутки к отдельным блокам анимации. Плагин также имеет множество функций, таких как:

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

Что можно делать с Animate It! плагин? Вы можете добавить простой интерактивности к своим статьям, создать привлекательные страницы продаж, углубить эмоции своих художественных произведений или даже создать мощную бизнес-презентацию, если хотите. Просто помните, что не переусердствуйте, так как бомбардировка посетителя неограниченной анимацией - не лучший способ привлечь лояльных читателей.

Начало работы с Animate It!

После установки и активации плагина вы можете найти кнопку для добавления анимации в "Редакторе WordPress". Эта кнопка будет отображаться только в визуальном режиме, но если вы выучили команды, можно вставить коды из обычного текстового режима (подробнее об этом позже).

кнопка анимации mte-add

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

  • Анимация - это место, где можно выбрать, какой тип анимации вы хотите.
  • Задержка поможет вам настроить время до начала анимации.
  • Продолжительность - это продолжительность воспроизведения анимации от начала до конца. Чем больше число, тем медленнее будет анимация.
  • Время - это доля анимации, воспроизводимой за раз. Например, эффект "easyIn" будет воспроизводить анимацию медленнее в начале и быстрее в конце.

Вы можете проверить комбинации эффектов, проиграв их с помощью "Animate It!" кнопка. Если результат вам нравится, вы можете нажать кнопку "Вставить", чтобы использовать его в своем контенте.

оживить-mte-entry

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

оживить-mte-exit

Вкладка "Параметры" - это то место, где вы управляете общими настройками анимации. Здесь вы можете настроить воспроизведение анимации в цикле или только один раз, сохранить конечное состояние элемента, добавить собственный код CSS и установить триггер, запускающий анимацию. В частности, о триггере - настройке "Анимация вкл." - вы можете, например, выбрать "Прокрутка", и анимация начнется только в том случае, если область уже видна на экране.

анимировать-mte-параметры

Добавление вашего контента

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

Вы также увидите строку с текстом: " Пожалуйста, добавьте свое содержимое в эту область". Здесь вы можете добавить элементы, которые хотите анимировать. Это может быть текст, изображения, значок, логотипы, аудио, видео или даже другие короткие коды. Я попытался добавить шорткод с типизированным эффектом, сгенерированный с помощью плагина Типизированный Js, и результат отличный.

Animate-mte-add-your-content

Если бы я мог что-то сказать об использовании Animate It! плагин, это будет "Эксперимент!" Поиграйте с ним и попробуйте разные комбинации, чтобы получить желаемый результат. Это весело. И вот результат, который я получил менее чем за минуту. Я объединил Animate It! плагин с плагином Typed Js.

оживить-mte-результат

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

2 комментария

  1. Привет, спасибо за отличный урок. Можно ли приостановить движение анимации, когда пользователь прекращает прокрутку? Или у вас есть рекомендации по достижению эффекта на следующем сайте; где текст заголовка перемещается немного быстрее поверх других элементов - http://pattersons.com/residential/seascape-retreat/

  2. Добрый вечер. Отличная статья. Несмотря на то, что я смотрел Animate It несколько раз, я так и не смог с этим справиться. Никогда не любил платить за что-то, когда есть бесплатная версия, но оно того стоит. Вы получаете лучшую поддержку, больше / больше функций, и это просто работает. Я лично использовал AnimateWP, и я более чем счастлив.

Комментарии закрыты.