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

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

HTML

page1

page2

page3

CSS

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

}

JS

var wrap = document.getElementsByClassName('wrap')[0];

var items=document.getElementsByClassName('item');

var clientHeight=document.body.clientHeight;

var num = 0;

//窗口改变时的自适应

window.οnresize=function(){

clientHeight=document.body.clientHeight;

for (var i=0;i

items[i].style.height=clientHeight;

}

}

wrap.addEventListener("scroll", function() {

num = wrap.scrollTop;

for (var i=0;i

items[i].style.backgroundPositionY=num-i*clientHeight +'px';//根据滚动条的位置改变item的backgroundPosY

}

})