Как остановить 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.


Ответы (0 шт):