视差.js移动我的 CSS 定位元素

Parallax.js moves my css-positioned elements

本文关键字：定位 元素 CSS 我的 js 移动 视差      更新时间：2023-09-26

我开始尝试视差.js遇到了一个问题：

我在天空中布置了一些云，并使用CSS定位它们的"顶部"位置，使它们分布在天空中（我也使用Javascript和Greensock GSAP尝试过，在这种情况下设置它们的"y"）。 无论如何初始化视差.js只是将它们的位置擦干净并将它们全部放在彼此之上。

我已经浏览了视差中的配置变量.js并尝试更改一些，但这无济于事。

我不明白什么？

另外，是否可以使用 GSAP 对视差.js定位元素进行动画处理？ 也就是说，他们是否在屏幕上移动并受到Parallax.ja的影响？

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

出于某种原因，视差.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

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

<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元素通过视差设置为 0,0.js正如您所指出的，您需要改为在每个图层中定义对象。

   <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>
相关文章：