我发现好的网站都用了如下GIF的模块与背景图片切换的效果，这让在下心痒痒的，所以自己动手写了一遍发现蛮简单的，分享给大家！


H5视频做背景IOS会闪屏 h5动态背景_H5视频做背景IOS会闪屏

思路说明:

  • 首先我的思路是介个样子的：先让一个空的宽度高度都占满的div孩子悬浮最底层，里面设置宽度高度-都占满背景图片，这样底部的图片就搞定了；
  • 然后再设置竖直排列宽度高度都占满的div模块，模块的排布为：实体模块=》透明模块=》实体模块=》透明模块=》实体模块，这样的话向下滑动滚动条就可以把图片露出来了；
  • 最后在根据当前位置距离顶部的距离来动态修改背景图片就好了。

js监听滚动写法：

html的注释写得比较详细就不多说了，css中我把模块的高度都设置成100vh了，也就是整个视图的高度，但是当浏览器放大或缩小时会出现图片切换时机偏差，要再次刷新浏览器才会正常，所以我推荐还是给个实高好一点，把.top .middle .bottom的高度设置在1000px以上效果好。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        text-align: center;
        font-size: 100px;
        color: white;
        line-height: 100vh;
    }
    
    .main-div {
        width: 100%;
        height: 100vh;
        background-image: url(./images/1.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: fixed;
        z-index: -1;
    }
    
    .transparent-module {
        width: 100%;
        height: 100vh;
    }
    
    .top {
        width: 100%;
        height: 100vh;
        background: #f00;
    }
    
    .middle {
        width: 100%;
        height: 100vh;
        background: #0f0;
    }
    
    .bottom {
        width: 100%;
        height: 100vh;
        background: #00f;
    }
</style>

<body>
    <header></header>
    <main>
        <!-- 悬浮最底层的背景 -->
        <div class="main-div" id="main-div"></div>
        <!-- 红色top模块 -->
        <div class="top">top</div>
        <!-- 透明且高度100%模块 -->
        <div class="transparent-module"></div>
        <!-- 绿色middle模块 -->
        <div class="middle" id="middle">middle</div>
        <!-- 透明且高度100%模块 -->
        <div class="transparent-module" id="tm"></div>
        <!-- 蓝色bottom模块 -->
        <div class="bottom">bottom</div>
    </main>
    <footer></footer>
</body>
<script>
    window.onload = () => {
        // console.log('welcome')
        var mainDiv = document.getElementById('main-div');
        var middle = document.getElementById('middle');
        var tm = document.getElementById('tm');
        // console.log(middle.offsetTop);
        // console.log(middle.getBoundingClientRect().top);
        // 获取绿色middle模块离页面顶部的距离
        var middleTop = middle.offsetTop || middle.getBoundingClientRect().top;
        // 获取第二个透明且高度100%模块离页面顶部的距离
        var tmTop = tm.offsetTop;
        // 实时监听当前页面离页面顶部的距离
        window.addEventListener("scroll", function(event) {
            // 当前页面离页面顶部的距离
            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            // console.log(scrollTop)
            // 判断切换背景图片
            if (scrollTop < middleTop) {
                mainDiv.style.backgroundImage = "url(./images/1.jpg)"
            } else if (scrollTop > middleTop) {
                mainDiv.style.backgroundImage = "url(./images/2.jpg)"
            }
        });
    }
</script>

</html>

css背景悬浮写法：

另外我还发现了一种不需要操作js的写法，就是利用background-attachment: fixed;来实现，设置fixed后，背景就不会随之页面的滚动而滚动了。不过固定背景导致重绘的成本很高，所以在一些移动端是被禁止的，只需要在电脑端展示的话还是很不错的。

效果：

H5视频做背景IOS会闪屏 h5动态背景_JS实现面纱背景_02

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
    }
    
    section {
        height: 100vh;
    }
    
    .block1 {
        background: url(./images/1.jpg) center;
        background-size: cover;
        background-attachment: fixed;
    }
    
    .block2 {
        background: url(./images/2.jpg) center;
        background-size: cover;
        background-attachment: fixed;
    }
    
    .transparency {
        height: 60vh;
    }
    
    .card {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20vh;
        font-size: 100px;
        color: #fff;
        background-color: #1E1E1E;
    }
</style>

<body>
    <main>
        <section class="block1">
            <div class="card">
                <p>1</p>
            </div>
            <div class="transparency"></div>
            <div class="card">
                <p>2</p>
            </div>
        </section>
        <section class="block2">
            <div class="card">
                <p>3</p>
            </div>
            <div class="transparency"></div>
            <div class="card">
                <p>4</p>
            </div>
        </section>
    </main>
</body>

</html>

H5视频做背景IOS会闪屏 h5动态背景_JS实现面纱背景_03