滚动时图像背景更改答案

【问题标题】：image background change on scroll滚动时图像背景更改
【发布时间】：2021-09-21 15:21:37
【问题描述】：

我正在尝试更改滚动上的背景图像，但似乎找不到任何指南，所以我会在这里试试运气。这是我正在努力实现的视频 - https://www.youtube.com/watch?v=7u1aIxQCIXg 我想要一个背景图像，以及当我滚动时会出现的文本，当我到达某个点时，背景图像会改变/淡出，而不是从底部向上滚动

我已经尝试了一些，但目前还没有技能

【问题讨论】：

我们不调试 YouTube 视频！ Edit 问题并创建一个文本minimal reproducible example
向我们展示您尝试过的代码。
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript html css scroll

【解决方案1】：

虽然你没有提供你取得的任何进展，但我还是很喜欢这样做如果您觉得有用，请接受我的回答，请查看我的 codepen 链接 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>

【讨论】：

与其发布指向 Codepen 的链接，不如考虑使用 code snippet。
@Felipe Saldanha 它是基于window.onscroll 的代码，并且此窗口中有很多其他元素，因此它破坏了我的代码。我首先使用了代码 sn-p，它破坏了预期的功能，然后我编辑并将其放入 codepen 并在此处添加链接