Анимированный текст и микровзаимодействия с Wix Velo

В этом примере я создала микровзаимодействия с 3 текстовыми элементами, используя Wix Animations API. При нажатии на каждое слово, появляется своя анимация.

Анимированный текст и микровзаимодействия с Wix Velo



Как создать аналогичную анимацию на Wix?


Элементы страницы


На нашем сайте я добавила следующие элементы страницы:

  1. Текстовые элементы для построения предложения (5 из которых я буду использовать для создания микровзаимодействий).

  2. 2 изображения.

Код

В функции $w.onReady() мы объявляем все элементы, которые хотим анимировать. Затем мы создаем отдельную временную шкалу анимации для каждой из трех:


1) Дрожание: когда пользователь наводит курсор на текстовый элемент «микровзаимодействия», мы создаем эффект дрожания, быстро перемещая «микровзаимодействия» во всех направлениях и добавляя небольшое вращение.


2) Слайд «стрелка»: когда пользователь наводит курсор на текстовый элемент «текст», мы создаем эффект рельефа, перемещая стрелку по горизонтали вперед и назад, толкая текстовый элемент «в» назад и текстовый элемент «текст» вперед. Для дополнительного эффекта мы используем параметры плавности easyInSine и easyOutSine API wix-animations.


Обратите внимание, что мы настраиваем эту анимацию по-разному для мобильных устройств.

3) Показать изображения: когда пользователь наводит курсор на текстовый элемент «изображения», мы создаем эффект затухания, постепенно показывая 2 элемента изображения. Мы делаем это, изменяя непрозрачность элементов изображения и используя параметр easing easyOutQuad API wix-animations.


Последний шаг — добавить обработчики событий onMouseIn() и onMouseOut() к трем текстовым элементам. При наведении курсора на 3 текстовых элемента будет воспроизводиться их анимация. При наведении курсора на 3 текстовых элемента их анимация будет либо повторяться, либо приостанавливаться, либо реверсироваться в зависимости от анимации.

Скопируйте код на страницу сайта