JavaScript-滚动时的图像背景更改-堆栈溢出

顺晟科技

2022-10-19 12:21:06

187

我正试图改变滚动的背景图像，但似乎找不到任何指导，所以我将在这里碰碰运气。以下是一段视频，正是我试图实现的目标-https://www.youtube.com/watch?v=7u1aixqcixg 我希望有一个背景图像和文本，当我滚动时，当我到达某个点时，背景图像改变/褪色，而不是从底部向上滚动

我试过一些，但目前没有技能

顺晟科技：

虽然你没有提供任何进步，但我仍然喜欢这样做接受我的答案，如果你觉得它有用，请检查我的代码链接 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>

上一篇：按钮的HTML标签重定向到仅用于按钮下一篇：HTML-带有<li>的CSS-St

网站建设

Html

JavaScript-滚动时的图像背景更改-堆栈溢出