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

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

Посмотреть Пример

Как создать аналогичную анимацию на 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 текстовых элемента их анимация будет либо повторяться, либо приостанавливаться, либо реверсироваться в зависимости от анимации.

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

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())});

Откройте Пример в редакторе >