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

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

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

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
28717162
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В 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>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
3D галерея
Tilda
Подсказки при наведении курсора
Tilda