- Julia Sememova
Анимированный текст и микровзаимодействия с Wix Velo
В этом примере я создала микровзаимодействия с 3 текстовыми элементами, используя Wix Animations API. При нажатии на каждое слово, появляется своя анимация.
Как создать аналогичную анимацию на Wix?
Элементы страницы
На нашем сайте я добавила следующие элементы страницы:
Текстовые элементы для построения предложения (5 из которых я буду использовать для создания микровзаимодействий).
2 изображения.
Код
В функции $w.onReady() мы объявляем все элементы, которые хотим анимировать. Затем мы создаем отдельную временную шкалу анимации для каждой из трех:
1) Дрожание: когда пользователь наводит курсор на текстовый элемент «микровзаимодействия», мы создаем эффект дрожания, быстро перемещая «микровзаимодействия» во всех направлениях и добавляя небольшое вращение.
2) Слайд «стрелка»: когда пользователь наводит курсор на текстовый элемент «текст», мы создаем эффект рельефа, перемещая стрелку по горизонтали вперед и назад, толкая текстовый элемент «в» назад и текстовый элемент «текст» вперед. Для дополнительного эффекта мы используем параметры плавности easyInSine и easyOutSine API wix-animations.
Обратите внимание, что мы настраиваем эту анимацию по-разному для мобильных устройств.
3) Показать изображения: когда пользователь наводит курсор на текстовый элемент «изображения», мы создаем эффект затухания, постепенно показывая 2 элемента изображения. Мы делаем это, изменяя непрозрачность элементов изображения и используя параметр easing easyOutQuad API wix-animations.
Последний шаг — добавить обработчики событий onMouseIn() и onMouseOut() к трем текстовым элементам. При наведении курсора на 3 текстовых элемента будет воспроизводиться их анимация. При наведении курсора на 3 текстовых элемента их анимация будет либо повторяться, либо приостанавливаться, либо реверсироваться в зависимости от анимации.
Скопируйте код на страницу сайта
import { timeline } from 'wix-animations' import { formFactor } from 'wix-window' // ID: 5C4819EC0ED2650B78BBB95DAC1D7FBE // Configure animation for mobile devices const isMobile = formFactor === 'Mobile' $w.onReady(function () { // Declare all elements in the animation: const micro = $w('#microText') const images = $w('#imagesText') const image1 = $w('#firstImage') const image2 = $w('#secondImage') const to = $w('#toText') const text = $w('#textText') const arrow = $w('#arrowText') // Create the individual animation timelines for each of the 3 animations: // Shiver 'micro': const shiver = timeline({ repeat: -1 }) .add(micro, { duration: 50, x: 2, y: 1 }) .add(micro, { duration: 50, x: -2, y: -1 }) .add(micro, { duration: 50, x: 1, y: 2 }) .add(micro, { duration: 50, x: -1, y: -2 }) .add(micro, { duration: 100, rotate: 1 }, 0) .add(micro, { duration: 100, rotate: -1 }, 100) // Slide 'arrow': const slide = timeline({ repeat: -1 }) .add(arrow, { duration: 400, x: isMobile ? -19 : -48, easing: 'easeOutSine' }) .add(to, { duration: 200, x: isMobile ? -8 : -12, easing: 'easeOutSine' }, '-=32') .add(to, { duration: 200, x: 0, easing: 'easeInSine' }) .add(arrow, { duration: 400, x: 0, easing: 'easeInSine' }, '-=370') .add(arrow, { duration: 400, x: isMobile ? 19 : 48, easing: 'easeOutSine' }) .add(text, { duration: 200, x: isMobile ? 8 : 12, easing: 'easeOutSine' }, '-=32') .add(text, { duration: 200, x: 0, easing: 'easeInSine' }) .add(arrow, { duration: 400, x: 0, easing: 'easeInSine' }, '-=370') // Show images: // Start by putting the images in a separate hidden timeline so that we can reverse the animation to opacity: 0. // Otherwise we will jump to opacity: 1 at the end of the reverse timeline().add([image1, image2], { duration: 0, opacity: 0 }, 0).play() const show = timeline() .add(image1, { duration: 0, x: 80, y: -40 }) .add(image2, { duration: 0, x: -80, y: 40 }) .add([image1, image2], { duration: 1000, opacity: 1 }) .add([image1, image2], { duration: 1000, x: 0, y: 0, easing: 'easeOutQuad' }, 0) // Play ‘shiver micro’ animation on hover and reset on out: micro.onMouseIn(() => shiver.play()) micro.onMouseOut(() => shiver.replay().pause()) // Play ‘slide arrow’ animation on hover and pause on out: text.onMouseIn(() => slide.play()) text.onMouseOut(() => slide.pause()) // Play ‘show images’ animation on hover and reverse on out: images.onMouseIn(() => show.play()) images.onMouseOut(() => show.reverse()) });