全屏背景视觉差滚动效果

Posted 2020-10-24 jackywong

        <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>

<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>

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
                }
            })