Как ускорить анимацию при скролле страницы?

Question

[Лев Александров]

Здравствуйте.
Есть анимация бегущей строки и крутящегося квадрата: https://codepen.io/h3ckphy/pen/ExvKLZL

Я хочу сделать так, чтобы при скролле эти анимации ускорялись (в зависимости от скорости скролла) и плавно замедлялись до своих начальных скоростей после того, как скролл перестал двигаться. Как это можно сделать?
Вот здесь это реализовано для бегущей строки:
https://hagisbarbershop.de/
Там она вроде реализована через Swiper, но т. к. я не хочу из-за одной бегущей строки подключать целый Swiper, то нашел другое решение.

Answer 1

[RAX7]

Comments

[Лев Александров]

Как вы додумались до этого?

[Лев Александров]

RAX7, мне понравился ваш способ с организацией цикла для requestAnimationFrame. Я попытался реализовать удаление функции из множества rafQueue, если я захочу остановить какую-то анимации. Написал функцию discard(fn) в которой просто делаю rafQueue.delete(fn). Но проблема в том, что при передаче в нее метода класса, например, так: discard(square.animate.bind(this)) метод не удаляется из очереди. delete считает, что такой функции в множестве нет. Подозреваю, что это из-за того, что мы передавали функции в add предварительно связав ее с контекстом this через bind. Как можно решить эту проблему?

[RAX7]

Подозреваю, что это из-за того, что мы передавали функции в add предварительно связав ее с контекстом this через bind.

Да, каждый вызов bind возвращает новую функцию, поэтому delete считает, что такой функции в множестве нет.

square.animate.bind(this) === square.animate.bind(this) // -> false

Как можно решить эту проблему?

Сохранить ссылку на забинденную функцию в экземпляре класса.

this.animateFn = this.animate.bind(this)
everyFrame(this.animateFn);

discard(marquee1.animateFn);

function discard(fn) {
  rafQueue.delete(fn);
}

[Лев Александров]

RAX7, спасибо))