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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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