全屏背景视觉差滚动效果
<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 } })