Question

我目前使用的是一个jquery库：http://pixelcog.github.io/parallax.js/，不要与其更受欢迎的版本混淆：https://github.com/wagerfield/parallax

如果我使用的是jQuery插件，我不在乎，但是当我向下滚动白色div顶部的红色div时，我很难获得视差效果。 我希望在白色div和图片div上对这两个底部div有相同的效果。

FIDDLE：https://jsfiddle.net/jzhang172/rcx2zpau/1/

澄清：我不需要jQuery插件，我只是在寻找指定的行为。

更新：我唯一看到的是来自jQuery的Scrollmagic插件，链接到这里：http://scrollmagic.io/examples/，所以我会尝试并在此处发布结果。

＆＃13;

.one{
  height:500px;
  overflow:hidden;
}
.someshit{
  height:300px;
}
.someothershit{
  height:700px;
  background:red;
}

＆＃13;

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

＆＃13;

Answer 1

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

div盒子的视差效果

1 个答案: