Estoy tratando de aprender a usar el efecto de paralax usando javascript y css simples. mi javascript es:
window.addEventListener('scroll', function(){ document.getElementById("second").style.left = window.scrollY + 'px'; document.getElementById("third").style.left = window.scrollY + 'px'; })desde mi comprensión de las cosas, debería hacer que el elemento llamado tercer y segundo pergamino deje el mismo valor que el pergamino vertical. Pero no funciona y no puedo encontrar cuál es el problema aquí.
Todo mi código es:
<!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> ```