https://sella.su/wp-content/themes/hello-elementor/assets/lib/parallax-mouse.js?ver=6.6.2

1// Модуль параллакса мышью 
2/*
3Предмету, который будет двигаться за мышью указать атрибут data-prlx-mouse.
4
5// =========
6Если нужны дополнительные настройки - указать 
7
8Атрибут											Значение по умолчанию
9-------------------------------------------------------------------------------------------------------------------
10data-prlx-cx="коэффициент_х"					100							значение больше - меньше процент сдвига
11data-prlx-cy="коэффициент_y"					100							значение больше - меньше процент сдвига
12data-prlx-dxr																		против оси X
13data-prlx-dyr																		против оси Y
14data-prlx-a="скорость_анимации"				50								больше значение - больше скорость
15
16// =========
17Если нужно считывать движение мыши в блоке-родителе - тому родителю указать атрибут data-prlx-mouse-wrapper
18
19Если в параллаксе картинка - расстянуть ее на >100%. 
20Например:
21	width: 130%;
22	height: 130%;
23	top: -15%;
24	left: -15%;
25*/
26class MousePRLX {
27	constructor(props, data = null) {
28		let defaultConfig = {
29			init: true,
30			logging: true,
31		}
32		this.config = Object.assign(defaultConfig, props);
33		if (this.config.init) {
34			const paralaxMouse = document.querySelectorAll('[data-prlx-mouse]');
35			if (paralaxMouse.length) {
36				this.paralaxMouseInit(paralaxMouse);
37				// this.setLogging(`Проснулся, слежу за объектами: (${paralaxMouse.length})`);
38			} else {
39				// this.setLogging('Нет ни одного объекта. Сплю...zzZZZzZZz...');
40			}
41		}
42	}
43	paralaxMouseInit(paralaxMouse) {
44		paralaxMouse.forEach(el => {
45			const paralaxMouseWrapper = el.closest('[data-prlx-mouse-wrapper]');
46
47			// Коэф. X 
48			const paramСoefficientX = el.dataset.prlxCx ? +el.dataset.prlxCx : 100;
49			// Коэф. У 
50			const paramСoefficientY = el.dataset.prlxCy ? +el.dataset.prlxCy : 100;
51			// Напр. Х
52			const directionX = el.hasAttribute('data-prlx-dxr') ? -1 : 1;
53			// Напр. У
54			const directionY = el.hasAttribute('data-prlx-dyr') ? -1 : 1;
55			// Скорость анимации
56			const paramAnimation = el.dataset.prlxA ? +el.dataset.prlxA : 50;
57
58
59			// Объявление переменных
60			let positionX = 0, positionY = 0;
61			let coordXprocent = 0, coordYprocent = 0;
62
63			setMouseParallaxStyle();
64
65			// Проверяю на наличие родителя, в котором будет считываться положение мыши
66			if (paralaxMouseWrapper) {
67				mouseMoveParalax(paralaxMouseWrapper);
68			} else {
69				mouseMoveParalax();
70			}
71
72			function setMouseParallaxStyle() {
73				const distX = coordXprocent - positionX;
74				const distY = coordYprocent - positionY;
75				positionX = positionX + (distX * paramAnimation / 1000);
76				positionY = positionY + (distY * paramAnimation / 1000);
77				el.style.cssText = `transform: translate3D(${directionX * positionX / (paramСoefficientX / 10)}%,${directionY * positionY / (paramСoefficientY / 10)}%,0);`;
78				requestAnimationFrame(setMouseParallaxStyle);
79			}
80			function mouseMoveParalax(wrapper = window) {
81				wrapper.addEventListener("mousemove", function (e) {
82					const offsetTop = el.getBoundingClientRect().top + window.scrollY;
83					if (offsetTop >= window.scrollY || (offsetTop + el.offsetHeight) >= window.scrollY) {
84						// Получение ширины и высоты блока
85						const parallaxWidth = window.innerWidth;
86						const parallaxHeight = window.innerHeight;
87						// Ноль по середине
88						const coordX = e.clientX - parallaxWidth / 2;
89						const coordY = e.clientY - parallaxHeight / 2;
90						// Получаем проценты
91						coordXprocent = coordX / parallaxWidth * 100;
92						coordYprocent = coordY / parallaxHeight * 100;
93					}
94				});
95			}
96		});
97	}
98	// Логгинг в консоль
99	setLogging(message) {
100		// this.config.logging ? FLS(`[PRLX Mouse]: ${message}`) : null;
101	}
102}
103
104document.addEventListener("DOMContentLoaded", (event) => {
105	// Запускаем и добавляем в объект модулей
106	new MousePRLX({});
107});
108