Parallax.js 移动我的 css 定位元素答案

【问题标题】：Parallax.js moves my css-positioned elementsParallax.js 移动我的 css 定位元素
【发布时间】：2014-12-04 01:16:09
【问题描述】：

我开始尝试 Parallax.js 并遇到问题：

我在天空中布置了一些云，并使用 CSS 定位它们的“顶部”位置，使它们分布在天空中（我也尝试过使用 Javascript 和 Greensock GSAP，在这种情况下设置他们的'y'）。然而，初始化 Parallax.js 只是清除了它们的位置并将它们全部设置在彼此之上。

我已经检查了 Parallax.js 中的配置变量并尝试更改一些，但没有帮助。'

我不明白什么？

另外，是否可以使用 GSAP 为 Parallax.js 定位元素设置动画？也就是说，它们是否会在屏幕上移动并受到 Parallax.ja 的影响？

【问题讨论】：

请把代码贴出来，方便大家帮忙
不要使用top:，而是使用transform: translateY(...);，看看会发生什么。这仅基于您的故事，因为您没有提供任何代码

标签： javascript css gsap parallax.js

【解决方案1】：

我也遇到了这个问题，这里是未来谷歌搜索的答案。

出于某种原因 parallax.js 将“位置：绝对”添加到您的 .layer 元素中。在非 jquery 版本中 - 我刚刚在 line 289 上注释掉了以下内容。

// Configure Layer Styles
for (var i = 0, l = this.layers.length; i < l; i++) {
  var layer = this.layers[i];
  if (this.transform3DSupport) this.accelerate(layer);
  // layer.style.position = i ? 'absolute' : 'relative'; // nope
  // layer.style.display = 'block'; // nope
  // layer.style.left = 0; // nope
  // layer.style.top = 0; // nope

【讨论】：

这很好用！请注意，它位于 3.1 版的第 704 行。

【解决方案2】：

我上周自己遇到了这个问题，并想我会为所有的谷歌用户留下一个答案。虽然我手头没有海报的代码，但我有一个很好的猜测。

<ul>
  <li class='layer sky' data-depth=0.0></li>
  <li class='layer cloud1' data-depth=0.4></li>

....

 .cloud1 {
  background-image: url('...');
  position: absolute;
  top: 300px;
  left: 300px;
 }

layer 元素由 parallax.js 设置为 0,0，正如您所指出的，您需要改为在每一层内定义对象。

   <ul>
  <li class='layer' data-depth=0.0><div class='sky'></div></li>
  <li class='layer' data-depth=0.4><div class='clouds1'></div></li>

【讨论】：