Как остановить requestAnimationFrame для множества элементов
У меня есть сайт, десктопная версия страницы организована полноэкранными страницами с вертикальной прокруткой с помощью плагина Scrollify. Каждая страница имеет класс .js-fullscreen-item. Практически на каждой странице есть маленькие баблы, которые двигаются вслед за движением мышки. Скрипт был благополучно скопирован, но мозгов доработать мне не хватает. Итак, проблема заключается в следующем: анимацию движения запускает requestAnimationFrame, но как остановить его я не могу понять... Мне необходимо, чтобы при переходе на планшетное разрешение и меньше анимация останавливалась и не нагружала ресурсы устройства и не влияла на скрипты, которые будут запущены на планшетном и мобильном разрешениях. Прикладываю код:
let parallaxFlag = false;
parallaxMouseMove();
$(window).on('resize orientationchange', function() {
if ($(window).width() > 768 && $('.js-fullscreen').length) {
parallaxFlag = true;
}
if ($(window).width() <= 768) {
parallaxFlag = false;
}
})
function parallaxMouseMove() {
let fullViewBlocks = $('.js-fullscreen-item')
fullViewBlocks.each(function() {
const $this = $(this);
const $thisBlockOffsetTop = $this.offset().top;
const blebs = $(this).find('.js-bleb')
const speed = 0.5;
const forBlebs = 1;
let positionX = 0;
let positionY = 0;
let coordXprocent = 0;
let coordYprocent = 0;
function setMouseParallaxStyle() {
const distX = coordXprocent - positionX;
const distY = coordYprocent - positionY;
positionX = positionX + (distX + speed);
positionY = positionY + (distY + speed);
if (parallaxFlag) {
blebs.each(function(e) {
this.style.cssText = `transform: translate(${positionX / forBlebs}%, ${positionY / forBlebs}%);`;
})
}
requestAnimationFrame(setMouseParallaxStyle)
}
setMouseParallaxStyle()
this.addEventListener('mousemove', function(e) {
const parallaxWidth = this.offsetWidth;
const parallaxHeight = this.offsetHeight;
const coordX = e.pageX - parallaxWidth / 2;
const coordY = (e.pageY - $thisBlockOffsetTop) - parallaxHeight / 2;
coordXprocent = coordX / parallaxWidth * 100;
coordYprocent = coordY / parallaxHeight * 100;
})
})
}
Возможно есть какой-то мега плагин с параллаксом, желательно чтобы там была возможность выбора движения элементов (вертикальное, горизонтальное и 3д), с брекпоинтами, и необходимыми слушателями событий типа mousemove или scroll.