Используйте 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();
	})
})
← Все руководства по WixНайти другой материал →