i am trying to change background image on scroll, but cant seem to find any guide, so i will try my luck here. here is a video of exactly what i am trying to achieve - https://www.youtube.com/watch?v=7u1aIxQCIXg i want to have a background image, and text that goes over when i scroll, and when i come to a certain point, the background image changes/fades over and not scrolls up from the bottom
i have tried some, but does not have the skills at this point
although you didnt provided any progress you made still i enjoyed making it accept my answer if you find it usefull please check my codepen link demo
<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>