div 框上的视差效果答案

【问题标题】：Parallax effect on div boxesdiv 框上的视差效果
【发布时间】：2016-07-23 01:16:51
【问题描述】：

我目前正在使用一个 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>

【问题讨论】：

看起来该库仅适用于图像。它会更改嵌套图像的顶部位置以创建该效果

标签： javascript jquery html css

【解决方案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>

【讨论】：