i'm trying to learn how to use the paralax effect using simple javascript and css. my javascript is :
window.addEventListener('scroll', function(){
document.getElementById("second").style.left = window.scrollY + 'px';
document.getElementById("third").style.left = window.scrollY + 'px';
})
from my understanding of things, it should make the element called third and second scroll left by the same value as the vertical scroll. But it doesn't work and I can't find what's the problem here.
My whole code is:
<!DOCTYPE html>
<html>
<head>
<title>paralax</title>
<style>
*{
scroll-behavior: smooth;
}
section{
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before{
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to bottom right, #350529 , #45392c);
z-index: 100;
}
section img{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section img#sixth{
z-index: 10;
}
#text{
position: absolute;
color: white;
white-space: nowrap;
font-size: 7.5vw;
z-index: 9;
}
</style>
</head>
<body style="size: 100%; margin-top: 0px; margin-left: 0px;">
<section>
<img src="Plan-parallax-1.png" id="first">
<img src="Plan-parallax-2.png" id="second">
<img src="Plan-parallax-3.png" id="third">
<img src="Plan-parallax-4.png" id="fourth">
<img src="Plan-parallax-5.png" id="fifth">
<h2 id="text">Monde parallele</h2>
<img src="Plan-parallax-6.png" id="sixth">
</section>
<script>
window.addEventListener('scroll', function(){
document.getElementById("second").style.left = window.scrollY + 'px';
document.getElementById("third").style.left = window.scrollY + 'px';
})
</script>
</body>
</html>
```