simpleParallax

scratch.js

import debounce from 'lodash/throttle'

export default class Parallax {
    constructor() {
        this.parallaxElements = document.querySelector('.parallax-content')
        this.last_known_scroll_position = 0;
        this.ticking = false;

        this.observe = this.observe.bind(this)
        this.init()
    }

    init() {
        window.addEventListener('scroll', this.observe)
        window.addEventListener('touchmove', this.observe)
    }

    observe(e) {
        this.last_known_scroll_position = window.scrollY;

        if (!this.ticking) {
            window.requestAnimationFrame(() => {
                this.doSomething(this.last_known_scroll_position);
                this.ticking = false;
            });

            this.ticking = true;
        }
    }

    doSomething(pos) {
        const image = this.parallaxElements.querySelector('.layer')
        const imageRect = image.getBoundingClientRect()
        const containerRect = this.parallaxElements.getBoundingClientRect()

        const topLimit = 100;
        const botLimit = -300;

        const friction = 3
        console.log(pos)
        if (containerRect.top < window.innerHeight && containerRect.bottom >= 0) {
            let translateY = -(pos / friction) + containerRect.height
            if (translateY >= topLimit) {
                translateY = topLimit
            }
            if (translateY <= botLimit) {
                translateY = botLimit
            }
            image.style.transform = `translate3d(0,${translateY}px,0)`
        }
    }

    static closest(el, target) {
        if (!Element.prototype.matches) {
            Element.prototype.matches = Element.prototype.msMatchesSelector ||
                Element.prototype.webkitMatchesSelector;
        }

        if (!Element.prototype.closest) {
            do {
                if (el.matches(target)) return el;
                el = el.parentElement || el.parentNode;
            } while (el !== null && el.nodeType === 1);
            return null;
        }

        return el.closest(target)
    }

    /* observeElement(entries, observer){
         entries.forEach((entry) => {
             let box = entry.target;
             const currentY = entry.boundingClientRect.y
             const currentRatio = entry.intersectionRatio
             const isIntersecting = entry.isIntersecting
             
             let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
             
             // Scrolling down/up
             if (currentY < this.previousY) {
                 if (currentRatio > this.previousRatio && isIntersecting) {
                     box.style.transform = `translate3d(0,-${visiblePct},0)`
                 }
             } else if (currentY > this.previousY && isIntersecting) {
                 if (currentRatio < this.previousRatio) {
                     box.style.transform = `translate3d(0,${visiblePct},0)`
                 }
             }
 
             this.previousY = currentY
             this.previousRatio = currentRatio
             
             console.log(visiblePct)
         });
     }*/
}