Estoy tratando de cambiar la imagen de fondo en el desplazamiento, pero parece que no puedo encontrar ninguna guía, así que probaré suerte aquí. aquí hay un video de exactamente lo que estoy tratando de lograr: https://www.youtube.com/watch?v=7u1aIxQCIXg Quiero tener una imagen de fondo y un texto que aparece cuando me desplazo y cuando llego a en cierto punto, la imagen de fondo cambia/se desvanece y no se desplaza hacia arriba desde la parte inferior
he probado algunos, pero no tengo las habilidades en este momento
aunque no proporcionó ningún progreso que haya hecho, disfruté haciendo que aceptara mi respuesta si la encuentra útil, consulte mi demostración de enlace de codepen
<style> body {margin: 0;padding: 0;} .section { height: 100vh; width: 100%; display: flex; z-index: 1; position: relative; background-size: 100% 100% !important; } .text { margin:auto; font-size: 2.5em; border:1px solid white; color:white; padding:1em; text-shadow: 2px 2px 3px black, 2px 2px 3px black; } .BG { position: fixed; z-index: 0; opacity: 0.4; transition: opacity 0.3s ease; } .anim {opacity:1;} .show {color:orange;} </style> <body> <div class="main"> <div class="section BG"> <div class="show"></div> </div> <div class="section" BGurl="https://i.ibb.co/0DxzSg0/pngtree-blue-carbon-background-with-sport-style-and-golden-light-image-371487.jpg"><div class="text">SECTION</div></div> <div class="section" BGurl="https://i.ibb.co/31YPsfg/triangles-1430105-340.png"><div class="text">SECTION</div></div> <div class="section" BGurl="https://i.ibb.co/Y3BgqMc/7f3e186790208b63dadda09d6b91d334.jpg"><div class="text">SECTION</div></div> <div class="section" BGurl="https://i.ibb.co/GCQP61b/photo-1513151233558-d860c5398176-ixlib-rb-1-2.jpg"><div class="text">SECTION</div></div> <div class="section" BGurl="https://i.ibb.co/D9WGPf9/pngtree-modern-double-color-futuristic-neon-background-image-351866.jpg"><div class="text">SECTION</div></div> </div> </body> <script> function scrollPictureChange(){ var main = document.querySelector(".main"), sections = main.querySelectorAll(".section"), BG = main.querySelector(".BG"), el = document.querySelector(".show"),cords,index=0,h = window.innerHeight,lastIndex=null,offset=0 applyBG(0) window.addEventListener("scroll",function(){ scrollY = Math.abs(document.body.getClientRects()[0].top) index = Math.floor(scrollY / (h - offset)) if(index != lastIndex){ // on index change if(lastIndex != null){ applyBG(index) } lastIndex = index } el.innerText = `index : ${index} height : ${h} top : ${scrollY}` }) function applyBG(index){ BG.classList.remove("anim") setTimeout(function(){ BG.style.backgroundImage = `url(${sections[index + 1].getAttribute("BGurl")})` BG.classList.add("anim") },300) } } window.onload = scrollPictureChange window.onresize = scrollPictureChange </script>