Как сделать движущийся по горизонтали div в зависимости от прокрутки?

Question

[Bastax13]

Есть сайт, если прокрутить его, то станет видно, что курсор "прилип" по OX и движется по OY в зависимости от прокрутки страницы.
Натолкните на мысль, что это такое? Даже не знаю, по какому запросу гуглить.

Answer 1

[Robert Bl]

Есть такая библиотека для анимации GSAP. У неё есть плагин bezier. Там вы можете задать любой путь по точкам.

Answer 2

[Aleksey Solovyev]

Если не брать в расчет готовые библиотеки(Robert Bl ее упомянул), то тут нужно просто найти какое-то значение, которое будет изменяться при событии

В данном примере событие - скролл
window.onscroll
А переменная - pageYOffset (сколько пикселей проскроллено)
window.pageYOffset
При каждом window.onscroll получаем новую pageYOffset и изменяем x, y, z элемента

el.style.translate = transform3d(x, y + window.pageYOffset, z)

где x - по горизонтали, y - по вертикали

или любое другое свойство

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

<div class="path__cursor" style="transform: translate3d(756.21px, 2968px, 0.001px);"></div>

Примерно так это и работает)