Эффект преследования мыши

Уроки по Тильде

В этом видео я расскажу, как создать плавное преследование изображения по движению курсора мыши

Описание

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

Материал из видео

В Zero блоке создаем шейп, который хотим анимировать и вешаем на него класс image_transform_1

Шаг 1

Через блок T123 подключаем библиотеку и стили (весь код поместить в конце страницы)

Шаг 2

<!--https://mt-webdesign.ru/image-mouse-follower-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<style>
/*Эффект наложения на текст*/
.mix {
mix-blend-mode: difference;
}
/*Видимое разрешение (заменить 480px на своё)*/
@media screen and (min-width: 480px) {
.image_transform_1, .image_transform_2, .image_transform_3 {
top: 0 !important;
left: 0 !important;
position: absolute;
}
}
</style>

Через блок T123 подключаем скрипт для анимации (весь код поместить в конце страницы)

Шаг 3

<script>
// Видимое разрешение (заменить 480px на своё)
if ($(window).width() > 480) {
gsap.set(".image_transform_1", {xPercent: -50, yPercent: -50});
const image_transform_1 = document.querySelector(".image_transform_1");
const pos_1 = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
const mouse_1 = { x: pos_1.x, y: pos_1.y };
// Меняем значение скорости изображения (.05)
const speed_1 = .05;
const xSet_1 = gsap.quickSetter(image_transform_1, "x", "px");
const ySet_1 = gsap.quickSetter(image_transform_1, "y", "px");
window.addEventListener("mousemove", e => { 
mouse_1.x = e.x;
mouse_1.y = e.y; 
});
gsap.ticker.add(() => {
const dt_1 = 1.0 - Math.pow(1.0 - speed_1, gsap.ticker.deltaRatio()); 
pos_1.x += (mouse_1.x - pos_1.x) * dt_1;
pos_1.y += (mouse_1.y - pos_1.y) * dt_1;
xSet_1(pos_1.x);
ySet_1(pos_1.y);
});
}
</script>