Создание анимации на wordpress с помощью плагина Animate me
Установите плагин с репозитория wordpress и активируйте его. Далее переходите в визуальнй редактор текста WYSIWYG и вы увидите, что в нем появилась дополнительная кнопка с текстом «Animate me». С ее помощью вызывается окно настройки анимации.
Настройка анимации в редакторе wordpress
По сути плагин предоставляет нам большие возможности чем библиотека animate.css поскольку у него есть не только удобный интерфейс с настройками анимации, ее появления, времени задержки и продолжительности, но и опции вызова анимации при наведении курсора hover css, прокрутки страницы, загрузки страницы. В первую очередь анимация здесь настраивается, а затем вставляется в страницу с помощью шорткода.Для примера сделаем настройку анимации для картинки. Во вкладке Entry настраивается сама анимация выбранного вами блока контента страницы.
Настройка анимации в animate me
А на вкладке Options настраивается количество появления анимации и при каком условии она будет вызвана. Можно сделать так чтобы анимация появилась при:
• прокрутке страницы до определенного ряда,• наведении курсора на объект,• клике по кнопке,• загрузке страницы.
Анимация при прокрутке страницы
После настройки жмите на кнопку Insert и вокруг выбранного вами элемента должен вставится шорткод. И на этом пожалуй все.
Интеграция анимации в редакторе wordpress с помощью плагина Animate Me
Также плагин Animate me на вкладке Exit позволяет настроить анимацию при ее окончании. Например, вы можете сделать вращение элемента при загрузке страницы в одну сторону, а при окончании срока анимации, вращение элемента в другую сторону.
Заключение
Что такое хорошее время загрузки страницы?
Прежде чем вы начнете работать над скоростью вашего сайта, установите цель. Это может быть сложно, если вы не знаете, какова допустимая скорость страницы.
Если опираться на Google, лучшая практика — 3 секунды. К сожалению, большинство сайтов далеки от этого идеала.
При анализе 900 000 целевых страниц мобильных объявлений, охватывающих 126 стран, Google обнаружил, что 70% проанализированных страниц заняли почти 7 секунд для отображения визуального контента первого экрана.
Среднее время полной загрузки мобильной целевой страницы составляет 22 секунды, но при этом 53% посещений отменяются, если загрузка мобильного сайта занимает больше трех секунд.
Кроме того, поскольку время загрузки страницы идет от одной до десяти секунд, вероятность отказа мобильного пользователя увеличивается на 123%.
Что мы собираемся сделать?
Мы создадим анимацию загрузки с помощью CSS-класса, который вы можете применить практически к любому элементу (в пределах разумного).
Анимация загрузки
Лишь с одним CSS можно добиться высокой гибкости, изящности приложения и в то же время простоты.
Хотя сниппет довольно мал и вы можете просто скопировать и вставить его, я расскажу о том, что в нем происходит, и приведу пример его динамического использования при загрузке данных.
Нужно ли мне знать, как анимировать, для прочтения этого руководства?
Нет! Мы подробно рассмотрим, что именно вам нужно сделать. На самом деле анимация здесь относительно проста, так что давайте приступим к делу!
Состояние анимации
Следующее простое свойство, которое мы рассмотрим animation-play-state, оно определяет состояние анимации. Этому свойству передается одно из двух возможных ключевых слов:
- running — анимация воспроизводится (значение по умолчанию).
- paused — анимация приостановлена.
Перейдем к рассмотрению примера:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Приостановка и запуск анимации</title>
<style>
.test {
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
color: white; /* цвет шрифта белый */
background: green; /* цвет заднего фона */
position: relative; /* элемент с относительным позиционированием */
animation-name: iliketomoveit; /* имя анимации */
animation-duration: 5s; /* продолжительность анимации */
animation-iteration-count: infinite; /* указываем, что анимация будет повторяться бесконечно */
animation-play-state: running; /* анимация воспроизводится (значение по умолчанию) */
}
.test:hover {
animation-play-state: paused; /* указываем, что анимация приостанавливается при наведении курсора мыши на элемент */
}
@keyframes iliketomoveit {
0% {left: 0px;} /* начало цикла анимации */
25% {left: 400px;} /* 25% от продолжительности анимации */
75% {left: 200px;} /* 75% от продолжительности анимации */
100% {left: 0px;} /* конец цикла анимации */
}
</style>
</head>
<body>
<div class = "test">наведи на меня</div>
</body>
</html>
В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элемент с относительным позиционированием относительно левого края текущей позиции.
При наведении на элемент курсора мыши (псевдокласс :hover()) анимация приостанавливается за счет установки значения paused свойству animation-play-state, анимация возобновляется, когда курсор покидает элемент.
Результат нашего примера:
Рис. 197 Пример приостановки и запуска анимации.
Классическая анимация загрузки
- Откройте Sketch, создайте круг без заполнителя. Для параметра ширины контура задайте 20 px и выберите серый цвет.
- Скопируйте и вставьте тот же круг на том же месте (продублируйте круг) и измените его цвет, например, на голубой.
- Создайте квадрат поверх четверти голубого круга. Переместите слой с квадратом под слой с кругом и примените «Mask» (Маска) к слою с квадратом.
- Импортируйте файл в Principle с помощью кнопки «Import».
- Примените триггер «Auto» к первому артборду и поверните голубой круг на 360 градусов.
- Также примените триггер «Auto» ко второму артборду, измените название третьего слоя с кругом на «копию», соедините последнюю рабочую область с первой при помощи триггера «Auto».
Процесс целиком:
Что такое CSS анимация?
Как и CSS свойство плавных переходов transition, о котором мы говорили в предыдущем уроке, свойство animation призвано сделать нашу верстку более динамичной, оживить её для лучшего взаимодействия с пользователем и создания WOW эффекта.
Но в отличие от CSS переходов, создание анимации базируется на ключевых кадрах @keyframes, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также приостанавливать анимацию по определенному событию.
Другими словами, использование конструкции animation и @keyframes позволяет нам создавать более сложные сценарии анимаций.
Шпаргалка CSS свойств, которые можно анимировать
- -moz-outline-radius
- -moz-outline-radius-bottomleft
- -moz-outline-radius-bottomright
- -moz-outline-radius-topleft
- -moz-outline-radius-topright
- -webkit-line-clamp
- -webkit-text-fill-color
- -webkit-text-stroke
- -webkit-text-stroke-color
- all
- backdrop-filter
- background
- background-color
- background-position
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-width
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image-outset
- border-image-slice
- border-image-width
- border-left
- border-left-color
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-width
- border-start-end-radius
- border-start-start-radius
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-width
- border-width
- bottom
- box-shadow
- caret-color
- clip
- clip-path
- color
- column-count
- column-gap
- column-rule
- column-rule-color
- column-rule-width
- column-width
- columns
- filter
- flex
- flex-basis
- flex-grow
- flex-shrink
- font
- font-size
- font-size-adjust
- font-stretch
- font-variation-settings
- font-weight
- gap
- grid-column-gap
- grid-gap
- grid-row-gap
- grid-template-columns
- grid-template-rows
- height
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- left
- letter-spacing
- line-clamp
- line-height
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- mask
- mask-border
- mask-position
- mask-size
- max-height
- max-lines
- max-width
- min-height
- min-width
- object-position
- offset
- offset-anchor
- offset-distance
- offset-path
- offset-position
- offset-rotate
- opacity
- order
- outline
- outline-color
- outline-offset
- outline-width
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- right
- rotate
- row-gap
- scale
- scroll-margin
- scroll-margin-block
- scroll-margin-block-end
- scroll-margin-block-start
- scroll-margin-bottom
- scroll-margin-inline
- scroll-margin-inline-end
- scroll-margin-inline-start
- scroll-margin-left
- scroll-margin-right
- scroll-margin-top
- scroll-padding
- scroll-padding-block
- scroll-padding-block-end
- scroll-padding-block-start
- scroll-padding-bottom
- scroll-padding-inline
- scroll-padding-inline-end
- scroll-padding-inline-start
- scroll-padding-left
- scroll-padding-right
- scroll-padding-top
- scroll-snap-coordinate
- scroll-snap-destination
- scrollbar-color
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- text-decoration
- text-decoration-color
- text-decoration-thickness
- text-emphasis
- text-emphasis-color
- text-indent
- text-shadow
- text-underline-offset
- top
- transform
- transform-origin
- translate
- vertical-align
- visibility
- width
- word-spacing
- z-index
- zoom
Laser Loader
Перейти
Еще один плагин, добавляющий индикатор загрузки страницы. Опубликован 15 марта 2020 года. Инструмент весит меньше 5 KiB, поэтому грузится мгновенно, каким бы плохим не было соединение с интернетом. Благодаря этому, он появляется раньше всех остальных элементов страницы и наглядно демонстрирует в виде анимации скорость их загрузки.
Тонкая линия анимации, добавляющаяся на сайт посредством этого плагина, будет наложена поверх содержимого раздела, прямо под панелью инструментов браузера. Можно изменить расположение, перенеся индикатор в нижнюю часть страницы, если это будет лучше для вашего проекта.
Особенности Laser Loader для ВордПресс:
- можно выбрать любой цвет;
- множество настроек, от толщины линии до ее скорости;
- возможно использование собственного CSS, чтобы придать анимации идеальный вид;
- поддерживается замедление анимации;
- совместимо с RTL-сайтами — индикатор может показывать загрузку не слева направо, а справа налево;
- внесение настроек в работу плагина без работы с кодом;
- автоматическое определение процента загрузки страницы и мгновенное отображение соответствующей информации в индикаторе;
- полная адаптивность, обеспечивающая корректное функционирование на всех устройствах, от смартфонов до компьютеров;
- пожизненные бесплатные обновления, которые обеспечат совместимость со всеми новыми версиями браузеров.
Цена Laser Loader — $15
Разработчик отмечает, что его служба поддержки помогает вебмастерам с решением любых проблем, а также обращает внимание покупателей на документацию, прилагающуюся к плагину и позволяющую легко его освоить
Направление анимации
CSS свойство animation-direction определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. По аналогии с предыдущими свойствами допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).
Ниже представлены возможные значения для настройки направления анимации:
| Значение | Описание |
|---|---|
| normal | Каждый раз, когда цикл анимации завершён, анимация сбрасывается в начало и начинает цикл заново. Это значение по умолчанию. |
| reverse | Анимация воспроизводиться в обратном направлении. |
| alternate | Анимация воспроизводиться как normal каждый нечетный раз (1, 3, 5…) и как reverse каждый четный раз (2, 4, 6…). |
| alternate-reverse | Анимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5…) и как normal каждый четный раз (2, 4, 6…). |
Перейдем к рассмотрению примера:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Направление анимации</title>
<style>
div {
width: 75px; /* ширина элемента */
height: 75px; /* высота элемента */
border-radius: 60px; /* форма углов элемента */
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
color: white; /* цвет шрифта белый */
padding: 15px; /* внутренние отступы элемента со всех сторон */
position: relative; /* элемент с относительным позиционированием */
animation-duration: 1.5s; /* задаём продолжительность анимации 1,5 секунды */
animation-name: iliketomoveit; /* задаём имя анимации */
animation-iteration-count: infinite; /* анимация будет повторяться бесконечно */
}
.test {
animation-direction: normal; /* при завершении цикла анимации, анимация сбрасывается в начало и начинает цикл заново. */
}
.test2 {
animation-direction: reverse; /* анимация воспроизводиться в обратном направлении */
}
.test3 {
animation-direction: alternate; /* анимация воспроизводиться как normal каждый нечетный раз (1, 3, 5...) и как reverse каждый четный раз (2, 4, 6...) */
}
.test4 {
animation-direction: alternate-reverse; /* анимация воспроизводиться как reverse каждый нечетный раз (1, 3, 5...) и как normal каждый четный раз (2, 4, 6...) */
}
@keyframes iliketomoveit {
0% {top: 0px;} /* начало цикла анимации */
25% {top: 180px; background: red;} /* 25% от продолжительности анимации */
75% {top: 90px;} /* 75% от продолжительности анимации */
100% {top: 0px; background: black;} /* конец цикла анимации */
}
</style>
</head>
<body>
<div class = "test">normal</div>
<div class = "test2">reverse</div>
<div class = "test3">alternate</div>
<div class = "test4">alternate-reverse</div>
</body>
</html>
В этом примере мы создали простую анимацию, в которой с помощью CSS свойства top смещаем элементы с относительным позиционированием относительно верхнего края текущей позиции, изменяя при этом цвет заднего фона элемента.
С использованием селектора класса и свойства animation-direction мы указали различные значения, которые определяют возможные направления для анимации.
Результат нашего примера:
Рис. 198 Направление анимации в CSS.
WP Animated Buttons
Перейти
Еще один плагин ВордПресс, для использования которого нужен конструктор WPBakery Page Builder. Поступил в магазин 20 апреля 2020 года. Его назначение — установка на ваш сайт анимированных кнопок, гибко настраиваемых в соответствии с особенностями проекта. Дополнение простое в использовании, имеет понятные текстовые инструкции, осваивается за считанные минуты.
Особенности WP Animated Buttons для ВордПресс:
- 20 разновидностей кнопок с анимациями;
- 22 вида фоновых анимаций;
- 3 размера кнопки;
- неограниченные возможности по настройке цвета кнопок;
- множество сочетаний цвета+анимаций+размера кнопки+фона позволяют реализовать любую задумку, подобрав оптимальный вариант для конкретного сайта и раздела.
WP Animated Buttons стоит $14. Как и у других премиальных плагинов, у него есть 6 месяцев поддержки от разработчика, поставляющихся в комплекте.
Шаг 1. Создаем пример приложения React с Next.js
Перейдите в каталог, где вы хотите создать свой новый проект, и введите в командной строке следующее:
yarn create next-app# илиnpm init next-app
Вам будет предложено выбрать некоторые параметры, в частности имя, определяющее каталог, в котором создается проект, и тип проекта. Я использую и “Default Starter App”.
Новый проект Next.js
После установки перейдите в ваш новый каталог и запустите сервер разработки:
cd yarn dev# илиnpm run dev
Запуск сервера разработки с Next.JS
Следом давайте заменим содержимое в файле . Я собираюсь извлечь содержимое страницы из предыдущего примера, но мы создадим его аналогично тому, как если бы ожидали, что оно будет исходить от API. Во-первых, давайте добавим контент () в качестве объекта над оператором :
const content = { header: `So, how 'bout them Knicks?`, intro: `What are their names? I'm Santa Claus! This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! Good news, everyone! I've taught the toaster to feel love!`, list: }
Чтобы отобразить этот контент, давайте произведем следующую замену внутри :
<main> <h1>{ content.header }</h1> <p>{ content.intro }</p> <ul> { content.list.map((item, i) => { return ( <li key={i}>{ item }</li> ) })} </ul></main>
А что касается стилей, вы можете скопировать и вставить всё из файла из Части 1 в тэг в нижней части индексной страницы. Это даст нам следующее:
Основной контент страницы с Next.js
С этим мы должны вернуться к точке, аналогичной той, на которой закончили в Части 1. Но сейчас мы еще не используем никакую анимацию загрузки.
Отслеживайте через коммит!
Title Animo
Перейти
ВП-плагин, выпущенный через неделю после наступления 2020 года — 8 января. Позволяет использовать функцию, которую в последнее время стали применять на сайтах довольно редко, а именно — анимированные заголовки страниц. Ее особенность в том, что на вкладке вашего проекта в браузере, будет не просто статичный текст, а бегущая строка
Это привлекает внимание пользователей, а также напоминает о вкладке с вашим сайтом, пока пользователь изучает контент на других вкладках
Особенности плагина для анимаций заголовков страниц Title Animo:
- мало весит (24 KB);
- совместим со всеми популярными браузерами;
- 4 типа анимации: бегущая строка, печатная машинка, чередование слов, необычное появление символов;
- можно самостоятельно выбрать текст, который будет отображаться, а также настроить скорость анимации.
Цена Title Animo для ВордПресс — $14. Разработчик предоставляет 6 месяцев доступа ко квалифицированной техподдержке, а значит, если возникнут проблемы с использованием плагина, можно будет бесплатно проконсультироваться и получить помощь в разрешении затруднения.
Стиль для элемента, когда анимация не воспроизводится
CSS свойство animation-fill-mode задает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку, установленную свойством animation-delay).
Ниже представлены возможные значения для настройки этого свойства:
| Значение | Описание | |||
|---|---|---|---|---|
| none | К элементу не применяются какие-либо стили до (во время задержки анимации), или после воспроизведения анимации. Значение по умолчанию. | |||
| forwards | По окончанию анимации к элементу применяется стиль последнего ключевого кадра. Каким будет этот кадр зависит от сочетания значений свойств animation-direction и animation-iteration-count: | animation-direction (значение по умолчанию normal) | animation-iteration-count(значение по умолчанию 1) | Значение последнего ключевого кадра |
| normal | четное или нечетное число | 100% или to | ||
| reverse | четное или нечетное число | 0% или from | ||
| alternate | четное число | 0% или from | ||
| alternate | нечетное число | 100% или to | ||
| alternate-reverse | четное число | 100% или to | ||
| alternate-reverse | нечетное число | 0% или from |
backwards
К элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода заданного свойством animation-delay. Первый ключевой кадр определяется на основании значения animation-direction:
animation-direction (значение по умолчанию normal)
Значение первого ключевого кадра
normal
0% или from
alternate
0% или from
reverse
100% или to
alternate-reverse
100% или to
both
К элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена — во время задержки).
Перейдем к рассмотрению примера:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Использование свойства animation-fill-mode</title>
<style>
div {
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
color: white; /* цвет шрифта */
background: green; /* цвет заднего фона */
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
position: relative; /* элемент с относительным позиционированием */
animation-name: iliketomoveit; /* имя анимации */
animation-duration: 5s; /* продолжительность анимации */
animation-animation-delay: 2s; /* анимация воспроизводится c задержкой 2 секунды */
}
.test {
animation-fill-mode: none; /* не применяются какие-либо стили до (во время задержки), или после воспроизведения анимации */
}
.test2 {
animation-fill-mode: forwards; /* по окончанию анимации применяется стиль последнего ключевого кадра (красный фон) */
}
.test3 {
animation-fill-mode: backwards; /* применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода задержки. */
}
.test4 {
animation-fill-mode: both; /* применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена - во время задержки). */
}
@keyframes iliketomoveit {
0% {background: yellow;} /* задаем цвет заднего фона при начале анимации */
100% {background: red;} /* задаем цвет заднего фона по завершению анимации */
}
</style>
</head>
<body>
<div class = "test">none</div>
<div class = "test2">forwards</div>
<div class = "test3">backwards</div>
<div class = "test4">both</div>
</body>
</html>
В этом примере мы создали анимацию продолжительностью 5 секунд (animation-duration), в которой происходит изменение цвета заднего фона элемента. При этом анимация имеет задержку равную 2 секундам (animation-delay).
С использованием селектора класса и свойства animation-fill-mode мы указали различные значения, которые определяют стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку):
- Первый элемент — к элементу не применяются какие-либо стили до (во время задержки), или после воспроизведения анимации. Это значение по умолчанию.
- Второй элемент — по окончанию анимации к элементу применяется стиль последнего ключевого кадра (красный фон).
- Третий элемент — к элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода задержки. Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр).
- Четвертый элемент — к элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена — во время задержки). Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр), а по окончанию получит красный фон
Результат нашего примера:
Рис. 199 Пример использования свойства animation-fill-mode.
Highlighter
Перейти
Еще один плагин для ВордПресс, работающий только в связке с инструментом Elementor, поэтому перед покупкой стоит убедиться в том, что вы используете именно этот конструктор. Поступил в продажу 13 марта 2020 года, совместим с редактором Gutenberg. Позволяет эффектно выделять заголовки постов и страниц, в т.ч. с использованием более 20 анимаций
Это делает контент более привлекательным для посетителей и повышает шанс того, что пользователь обратит на него внимание
Настройка анимаций заголовков осуществляется прямо в интерфейсе Elementor, поэтому с ней справится даже начинающий вебмастер ВордПресс, тем более, что работать с кодом для внедрения возможностей дополнения не потребуется. Эффекты одинаково хорошо отображаются во всех популярных браузерах и при открытии сайта с любых устройств, от мобильных телефонов до настольных ПК.
Особенности плагина для добавления анимаций к заголовкам Highlighter:
- уникальные анимации, разработанные специально для плагина;
- 5 готовых шаблонов, которые можно применить мгновенно;
- можно настроить собственные шаблоны, выбрав шрифты, цвета, фоны, границы и многое другое;
- можно обработать также и дополнительный заголовок;
- дружественный для SEO-продвижения код;
- современная панель администратора, легкая в освоении;
- установка за 5-10 секунд;
- совместим с RTL.
Цена Highlighter — $9. В комплекте поставляется документация, подробно описывающая все этапы настройки анимации заголовка с помощью этого плагина, а также полугодовой доступ к техподдержке разработчика, готовой проконсультировать вас по любому вопросу.
