我目前正在使用一个jQuery库:http://pixelcog.github.io/parallax.js/,不要与它更流行的对应库混淆:https://github.com/wagerfield/parallax
我不在乎是否使用jQuery插件,但是当我将红色div向下滚动到白色div上方时,很难获得视差效果。我希望对这两个底部div产生与白色div和图片div相同的效果。
字段:https://jsfiddle.net/jzhang172/rcx2zpau/1/
为了澄清:我不需要jQuery插件,我只是在寻找指定的行为。
更新:我看到的唯一起作用的是来自jQuery的Scrollmagic插件,链接在这里:http://scrollmagic.io/examples/,所以我将尝试将其发布在这里。
.one{
height:500px;
overflow:hidden;
}
.someshit{
height:300px;
}
.someothershit{
height:700px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
<div class="parallax-window one" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/0/0d/025Pikachu.png"></div>
<div class="someshit">
Heyheyheyh, some text<br>
Heyheyheyh, some text<br>
Heyheyheyh, some text<br>
Heyheyheyh, some text<br>
</div>
<div class="someothershit" data-parallax="scroll">
HELP ME PARALLAX ONTO THE WHITE DIV PLEASE
</div>
最佳答案
<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
/* image can be used */
background-color: grey;
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
This is inside Parallax Div
</div>
</body>
</html>