My website is designed to have smooth parallax scrolling on every page except the home page.
Despite using the same code, I can't figure out why there is such a difference in behavior.
I've tried everything possible but still can't determine the cause of this issue.
Necessary code provided below. Live preview:
CSS
.homeIllustration {
width: 100%;
height: auto;
position: absolute;
transition: none;
}
.rightSide {
display: inline-block;
position: absolute;
width: 70%;
margin-left: 70px;
}
Javascript
if ($(window).width() > 800){
window.addEventListener('scroll', () => {
let parent = document.getElementById('illustrationContainer');
let children = parent.getElementsByTagName('img');
// document.getElementById("illustrationContainer").style.transform = 'translateY('+ window.pageYOffset* 1 + 'px)';
for(let i = 0; i < children.length; i++) {
// children[i].style.transform = 'translateY(' + (window.pageYOffset / (2 + 0.3*i) * children.length / 32) + 'px)';
children[i].style.transform = 'translateY(' + (window.pageYOffset - ((window.pageYOffset / i)/5)) + 'px)';
}
}, false);
}