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

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

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

Как добавить анимированные текстовые эффекты в WordPress

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

Что такое анимированный текстовый эффект и как он выглядит?

Анимированные текстовые эффекты — отличный способ добавить немного веселья и волнения в ваши статьи и заголовки . Когда вы решите использовать причудливый анимированный текстовый эффект, вы можете создавать различные эффекты. Некоторые эффекты просты, как изменение цвета или размера текста , в то время как некоторые представляют собой детализированную анимацию, такую ​​как мерцание или мерцание текста .

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

Роль анимированных текстов на вашем сайте

В темах WordPress доступны различные типы анимированных текстовых эффектов, но все они имеют одинаковую базовую функциональность. Они меняют цвет или стиль текста и просто меняют стиль теста. Например, вы можете изменить кнопку «призыв к действию» с красным фоном и белым текстом с надписью «Нажмите здесь!» при нажатии.

Анимированный заголовок или раздел героя с причудливыми текстами играет следующие роли:

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

Самые простые способы добавления анимированных текстовых эффектов

Использование плагина WordPress

Сегодняшний рынок предлагает вам различные виды плагинов, которые упрощают задачи по стилизации текста. ElementsKit — это такой мощный плагин , а также дополнение для конструктора страниц Elementor. С ElementsKit вы получите все под одним капотом.

Причудливый анимированный текст — впечатляющий виджет, представленный ElementsKit pro.

Войдите в свою панель инструментов -> Выберите любую страницу или сообщение -> Нажмите «Редактировать с помощью ElementsKit» -> Найдите виджет ElementsKit Fancy Animation Text -> Перетащите виджет

Раздел контента

Эта часть называется частью Fancy Text , она содержит следующие поля:

Анимация

• Стиль анимации — здесь есть два варианта: текст или SVG, оба позволяют создавать разные стили анимации.
• Тип анимации — в зависимости от типа анимации вы получите здесь различные варианты.
• Продолжительность отображения (мс) — вы можете установить продолжительность анимации в миллисекундах с помощью поля параметров.
• Reveal Animation Delay (ms) — здесь можно настроить время задержки анимации. Он указывает, что анимация может начаться позже, сразу с самого начала или сразу и в середине анимации.

Содержание

• Текст префикса — вам нужно написать здесь содержимое префикса, которое вы хотите отобразить. Это значит, что она будет написана раньше, чем причудливая анимация.
• Необычные списки — добавьте сюда элементы для причудливой анимации.
• Текст суффикса — напишите содержимое суффикса, которое вы хотите отобразить. Так что это будет указано после причудливой анимации.

• HTML-тег заголовка — выберите здесь HTML-тег содержимого.
• Ссылка (необязательно) — добавьте любую ссылку, если вы хотите, чтобы пользователи перенаправлялись в любое другое место.

Раздел стиля

• Текст заголовка — используйте это поле для настройки выравнивания заголовка, типографики, цвета и т. д.
• Fancy Text Lists — используйте это поле для настройки типографики, цвета и отступов.
• Причудливый курсор — вы можете придать курсору причудливый вид с помощью цвета, ширины и высоты, используя это поле.

После редактирования и оформления всех необходимых утверждений нажмите «Обновить» и просмотрите изменения в интерфейсе. Пример -

Применение CSS

При создании CSS-анимации в WordPress помните о следующих основных, но важных вещах :

• Установка правильного имени анимации — это имя, которое будет отображаться на элементе, когда он перемещается с помощью анимации CSS. Например, если у вас есть кнопка с анимацией с именем «fadeIn», это значение будет использоваться для этого свойства.
• Продолжительность анимации — количество секунд, в течение которых анимация будет завершена. Вы также можете установить для этого параметра значение none или 0, чтобы анимация длилась бесконечно или до тех пор, пока не произойдет что-то еще (например, загрузка страницы).
• Функция синхронизации анимации — контролирует, как элемент перемещается из одного места в другое в зависимости от того, сколько времени это занимает в течение определенного промежутка времени (в миллисекундах). Например, если вы установите для этого свойства значение легкости, то ваш элемент начнет двигаться медленно, а затем ускорится в конце своей продолжительности, прежде чем снова начать с самого начала.
• Задержка анимации — это значение, указывающее, какое количество миллисекунд должно быть добавлено после завершения анимации, прежде чем она начнется снова (например, 1 с).
• Animation-iteration-count — количество времени, необходимое для воспроизведения анимации. Используя свойство CSS, вы можете подсчитать эту итерацию.
• Направление анимации — это порядок или направление, в котором должна воспроизводиться анимация. Он может быть нормальным, обратным, чередующимся и чередующимся-обратным.
• Animation-fill-mode — эти значения определяют, как должен отображаться элемент. Это может быть до и после применения к нему анимации.
• Знание @keyframes — указывает свойства анимации, которые меняются в процессе, а также значения, которые эти свойства должны принимать. Например:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

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

Однако от и до можно использовать вместо 0% и 100% соответственно .

Создание файла animate.css

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

Начните с написания простого кода в файле CSS. Пример кода для анимационного текста может выглядеть так:

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

Теперь, чтобы привязать этот ключевой кадр к классу CSS, мы установили текст с именем MyAnimation. Итак, сразу после приведенного выше кода вам нужно поместить приведенный ниже код в файл.

 .MyAnimation { animation-name: MyAnimation; }

Вы можете найти все базовые знания CSS анимации и попрактиковаться в кодах здесь!

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

Приведенный выше код анимирует текст вашего тега h1 « MyAnimation ». Вы можете изменить продолжительность анимации, изменив «3s» на другое значение . Вы также можете изменить цвета, изменив шестнадцатеричные значения. После того, как вы сохранили файл CSS, вы можете внести дополнительные изменения во внешний вид вашего веб-сайта, вы можете отредактировать файл CSS. Вы можете изменить шрифт, размер текста и цвет текста, отредактировав файл CSS. Вы также можете изменить цвет фона и размер заголовка, изменив файл CSS.

Загрузка файла animate.css на сайт WordPress

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

Шаг 1

Зайдите на сайт с помощью протокола передачи файлов (FTP) -> выберите FTP-клиент (FileZilla, WinSCP, Cyberduck и т. д.) -> выберите необходимые учетные данные в своей учетной записи хостинга.

Шаг 2

Доступ к вашему каталогу public_html -> Перейдите к wp-content -> Themes -> Выберите папку активной или дочерней темы.

Шаг 3

Теперь найдите подкаталог с именем css. Если вы его получите, загрузите файл animate.css или animate.min.css из файла Animate.css с подкаталогом.

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

Вызов таблицы стилей Animate через functions.php

Вы найдете файл functions.php в папке вашей активной темы. Теперь вам нужно добавить этот фрагмент кода для вызова таблицы стилей Animate:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Помните , что если вы использовали файл animate.min.css из Animate.css, вам нужно будет написать animate.min.css в конце строки вместо animate.css. После сохранения всех изменений перейдите в панель управления WordPress.

Применение анимации с помощью классов CSS

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

Наконец, выберите запись или страницу в классическом редакторе -> переключитесь в текстовый редактор -> или щелкните трехточечный значок на панели инструментов блока, если это редактор блока -> выберите «Редактировать как HTML» -> добавьте анимированный класс и класс для вашей анимации в тег элемента -> Предварительный просмотр

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

Однако применение CSS может быть немного сложным, если вы не имеете никакого представления о кодировании. Таким образом, для создания CSS-анимации в WordPress рекомендуется обратиться за помощью к эксперту. Кроме того, модный анимированный текст ElementsKit представляет собой интеллектуальный виджет, который поможет вам быстро создать любую стильную анимацию. С помощью виджета вы можете превратить выбранные вами тексты в причудливую анимацию.