Анимация изображений и текста с помощью кода

Используйте API wix-animations для анимации изображений и текста. В этом примере показано, как использовать API анимации временной шкалы для анимации изображений и текстовых компонентов при наведении на них курсора.

СМОТРЕТЬ ПРИМЕР

Как создать аналогичный код

1. Мы добавили на страницу 4 элемента редактора: три изображения и текстовый элемент.

2. Мы определили область наведения на странице.

3. Мы определили обработчик события onMouseIn в области наведения, который использует временную шкалу. API анимации для анимации движения трех изображений и текстового компонента.

4. Мы определили обработчик события onMouseOut в области наведения, который использует временную шкалу. API анимации для анимации сброса компонентов в исходное положение.

КОД НА СТРАНИЦУ

import { timeline } from 'wix-animations';

$w.onReady(function () {

const target1 = $w('#image3');

const target2 = $w('#image2');

const target3 = $w('#image1');

const target4 = $w('#title');

$w('#hoverArea').onMouseIn(() => {

timeline()

.add(target1, { y: 40, x: -280, scale: 1, duration: 600, easing: 'easeOutCirc' })

.add(target2, { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)

.add(target3, { y: -40, x: 280, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)

.add(target4, { y: -60, x: 0, scale: 1.15, duration: 400, easing: 'easeOutCirc' }, 0)

.play();

})

$w('#hoverArea').onMouseOut(() => {

const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

timeline()

.add(target1, reset)

.add(target2, reset, 0)

.add(target3, reset, 0)

.add(target4, reset, 0)

.play();

})

})

ОТКРЫТЬ В РЕДАКТОРЕ