Parallax.js移动css定位的元素。

Question

我刚开始用Parallax.js做实验，遇到了一个问题：

我在天空中放置了一些云，并使用CSS将它们的“顶部”位置定位为在天空中分布(我也尝试过使用Javascript和Greensock GSAP，在本例中设置它们的'y')。然而，在Parallax.js只是擦干净了他们的立场，并把他们都放在一起。

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

我有什么不明白的？

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

Answer 1

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

由于某种原因，parallax.js在您的.layer元素中添加了“位置:绝对”。在非jquery版本中，我刚刚在第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

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