I am trying to implement a parallax scrolling effect in the middle of my page, but it seems to be causing issues once I reach that section while scrolling.
I attempted to use intersection observer, but unfortunately, it did not resolve the problem.
const section = document.querySelector(".parallax");
const img = document.querySelectorAll("img");
const title = document.querySelector(".title")
const observer = new IntersectionObserver((entries) =>{
entries.forEach((entry) =>{
if(entry.isIntersecting){
window.addEventListener("scroll", ()=>{
console.log(window.scrollY);
img[0].style.top = `-${window.scrollY/12}px`;
img[1].style.top = `-${window.scrollY /13}px`;
img[2].style.top = `-${window.scrollY / 14}px`;
img[3].style.top = `-${window.scrollY / 15}px`;
img[4].style.top = `-${window.scrollY / 16}px`;
img[5].style.top = `-${window.scrollY / 17}px`;
img[6].style.top = `-${window.scrollY / 18}px`;
title.style.marginRight = `${window.scrollY}px`;
})
}
})
}, {
threshold:0
})
observer.observe(section);