stylescape/js/scroll/ParallaxScrollManager.js

Stylescape is a visual identity framework developed by Scape Agency.

export class ParallaxScrollManager {
    constructor(parallaxSelector) {
        this.ticking = false;
        this.elements = Array.from(document.querySelectorAll(parallaxSelector));
        this.onScroll = this.onScroll.bind(this);
        window.addEventListener("scroll", this.onScroll);
    }
    onScroll() {
        if (!this.ticking) {
            window.requestAnimationFrame(() => {
                this.applyParallax();
                this.ticking = false;
            });
            this.ticking = true;
        }
    }
    applyParallax() {
        const scrollY = window.scrollY;
        this.elements.forEach((element) => {
            const speedAttr = element.getAttribute("data-speed");
            const speed = speedAttr ? parseFloat(speedAttr) : 0.5;
            if (!isNaN(speed)) {
                const yPos = -(scrollY * speed);
                element.style.backgroundPosition = `center ${yPos}px`;
            }
        });
    }
    destroy() {
        window.removeEventListener("scroll", this.onScroll);
    }
}
//# sourceMappingURL=ParallaxScrollManager.js.map