Julia Sememova
Jan 20, 20221 min
В этом примере я создала микровзаимодействия с 3 текстовыми элементами, используя Wix Animations API. При нажатии на каждое слово, появляется своя анимация.
На нашем сайте я добавила следующие элементы страницы:
Текстовые элементы для построения предложения (5 из которых я буду использовать для создания микровзаимодействий).
2 изображения.
В функции $w.onReady() мы объявляем все элементы, которые хотим анимировать. Затем мы создаем отдельную временную шкалу анимации для каждой из трех:
1) Дрожание: когда пользователь наводит курсор на текстовый элемент «микровзаимодействия», мы создаем эффект дрожания, быстро перемещая «микровзаимодействия» во всех направлениях и добавляя небольшое вращение.
2) Слайд «стрелка»: когда пользователь наводит курсор на текстовый элемент «текст», мы создаем эффект рельефа, перемещая стрелку по горизонтали вперед и назад, толкая текстовый элемент «в» назад и текстовый элемент «текст» вперед. Для дополнительного эффекта мы используем параметры плавности easyInSine и easyOutSine API wix-animations.
Обратите внимание, что мы настраиваем эту анимацию по-разному для мобильных устройств.
3) Показать изображения: когда пользователь наводит курсор на текстовый элемент «изображения», мы создаем эффект затухания, постепенно показывая 2 элемента изображения. Мы делаем это, изменяя непрозрачность элементов изображения и используя параметр easing easyOutQuad API wix-animations.
Последний шаг — добавить обработчики событий onMouseIn() и onMouseOut() к трем текстовым элементам. При наведении курсора на 3 текстовых элемента будет воспроизводиться их анимация. При наведении курсора на 3 текстовых элемента их анимация будет либо повторяться, либо приостанавливаться, либо реверсироваться в зависимости от анимации.