diff --git a/src/components/Home.jsx b/src/components/Home.jsx index a6bf6ac..2911f43 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -122,11 +122,35 @@ export default function Home() { useEffect(() => { // parallax effect const handleParallax = (entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // speed of the parallax effect - const backgroundSpeedFactor = 0.5; + entries.forEach((entry) => { + window.addEventListener("scroll", () => { + // get window height + let windowHeight = window.innerHeight; + + const scrolled = + window.scrollY - entry.target.offsetTop - windowHeight / 2; + + // background position + document.querySelector(".polaroids-sky").style.backgroundPositionY = + `-${scrolled * backgroundSpeedFactor}px`; + document.querySelector( + ".polaroids-bottom", + ).style.backgroundPositionY = + `-${scrolled * backgroundSpeedFactor}px`; + }); + } + }); + }; + + const observer = new IntersectionObserver(handleParallax, { + threshold: 0.1, + }); + + //element to observe + const target = document.querySelector(".end-scroll"); + observer.observe(target); + }, []); window.addEventListener('scroll', () => { // get window height let windowHeight = window.innerHeight;