试着写一个全屏背景视觉差滚动效果的代码

试着写一个全屏背景视觉差滚动效果的代码。

HTML

<div class="wrap">
    <div class="one item">
    <div class="content">page1</div>
    </div>
    <div class="two item">
        <div class="content">page2</div>
    </div>
    <div class="three item">
        <div class="content">page3</div>
    </div>
</div>

CSS

<style>
    html,body{
        height: 100%;
        margin: 0;         
    }      
    .wrap{
        width: 100%;
            height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        position: relative;
    }
    .item{
        display: block;
        width: 100%;
        height: 100%;
        font-size: 50px;
        text-align: center;
        position: relative;
        background-attachment: fixed;
        
    }
        /*分别设置item的背景*/ 
    .one{
        background: url(img/banner1.jpg) no-repeat top left / 100% 100%;
    }
    .two{
        background: url(img/banner2.jpg) no-repeat top left / 100% 100%;
    }
    
    .three{
        background: url(img/banner3.jpg) no-repeat top left / 100% 100%;
    }
    
    
    /*用伪类给item增加mask效果*/
    .item::before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        background-color: black;
        opacity: 0.3;
        width: 100%;
        height: 100%;       
    }
    
    .content{
        position: absolute;
        background-color: rgba(255,255,255,0.4);  /*设置文本背景的透明度但是又会让子元素继承到*/
        border-radius: 20px;
        width: 300px;
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-150px,-50px);          
    }
</style>

JS

var wrap = document.getElementsByClassName('wrap')[0];
var items=document.getElementsByClassName('item');
var clientHeight=document.body.clientHeight;
var num = 0;
//窗口改变时的自适应
window.onresize=function(){
    clientHeight=document.body.clientHeight;
    for (var i=0;i<items.length;i++) {
        items[i].style.height=clientHeight;
    }
}
wrap.addEventListener("scroll", function() {
    num = wrap.scrollTop;
    for (var i=0;i<items.length;i++) {
        items[i].style.backgroundPositionY=num-i*clientHeight +'px';//根据滚动条的位置改变item的backgroundPosY
    }
})