Question

我试图使用Jquery创建一个简单的视差效果（没有插件）。基本上我有一些不同的图像在彼此的顶部分层，当用户向下滚动时需要它们以不同的速度向上移动，类似于视差滚动效果。

到目前为止的布局（借口草率代码）：

＆＃13;

body {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background-color: #ededed;
    z-index: 4;
    display: table;
    
}
.header {
    position: relative;
    width: 100%;
    background-color: #ffde15;
    height: 900px;
    margin-left: auto;
    margin-right: auto;
    
}
.headertopimg {
    position: absolute;
    width: 100%;
    z-index: 10;
}
.headerbehindimg {
    position: absolute;
    width: 100%;
    z-index: 9;
    top:0%;

}
.headerbehindbehindimg {
    position: absolute;
    width: 100%;
    z-index: 8;
    margin-top: 8%;
    

}
.headerbgimg {
    position: absolute;
    width: 70%;
    z-index: 7;
    left: 50%;
    margin-left: -35%;

}

＆＃13;

<body>
<div class="header">
    <div class="headertop"><img src="http://i.imgur.com/z2DORfA.png" class="headertopimg"> </div>
    <div class="headerbehind"><img src="http://i.imgur.com/o1Yl0PD.png" class="headerbehindimg"></div>
    <div class="headerbehindbehind"><img src="http://i.imgur.com/VQxs9LD.png" class="headerbehindbehindimg"></div>
    <div class="headerbg"><img src="http://i.imgur.com/t5fTRZe.png" class="headerbgimg"></div>
    
    
    </div>

</body>

＆＃13;

非常感谢任何帮助！

如何使用Jquery在滚动时稍微向上移动图像？

0 个答案: