Виды
анимаций

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

1. Зацикленная анимация

Анимация запускается сразу после загрузки страницы и повторяется бесконечно. Это может быть вращение объекта, движение, блик, кручение, бегущая строка и т. д. Анимация проходит определённый путь, затем возвращается в исходное состояние и снова запускается.

Примеры:

- Индикатор загрузки (вращающийся круг, мигающая полоска и т. д.)
- Анимация кнопки (пульсация, изменение цвета, лёгкое покачивание для привлечения внимания)
- Анимация элемента (периодическое появление блика, лёгкое движение или изменение формы для акцента)
- Бегущая строка (текст или изображения, которые постоянно двигаются по экрану).
- Вращение иконки (например, иконка загрузки или кнопка с постоянным вращением).
- Плавное изменение прозрачности (эффект мигания или плавного исчезновения и появления объекта).
- Мигание светового эффекта (например, анимация фона или тени для привлечения внимания).
- Анимация фона (постоянная смена цвета фона или плавный переход между изображениями).
- Пульсация текста (текст, который постепенно увеличивается и уменьшается, привлекая внимание).
- Качание элементов (например, кнопка или иконка, которые постоянно качаются, как маятник).

2. Анимация по действию

Анимация запускается в ответ на определённое событие. В качестве триггера могут выступать таймер, наведение, клик, скролл или любое другое событие, которое инициирует анимацию.

Ниже приведены примеры, когда используется такой триггер

Анимация по наведению:

Существует два способа запуска анимации.

1. Если анимация активируется при наведении на тот же элемент и изменяет его свойства (например, смена цвета кнопки), используется CSS.

2. Если для запуска анимации задействован отдельный триггер (например, при наведении на карточку меняется цвет кнопки), чаще всего используют JavaScript. В этом случае создают небольшую функцию, которая изменяет нужные свойства у нужного элемента.

Анимация по клику:

Работает в связке с JavaScript. Создаётся аналогичная функция, как и для наведения, но событием, запускающим анимацию, является клик. Также можно использовать триггер для активации анимации.

Во время скролла:

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

По мере скролла:

Анимация проигрывается в процессе прокрутки страницы. Например, элемент может двигаться по экрану в зависимости от прокрутки или плавно проявляться из прозрачности.

Во время загрузки:

Анимация запускается при полной или частичной загрузке страницы. Она может сочетаться с зацикленной анимацией, например, индикатором загрузки.

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

Часто в веб-разработке используется именно комбинированная анимация, когда несколько анимаций применяются к одному элементу одновременно или пошагово.

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

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