javascript - 违反物理学的基本视差效果

Question

我试图了解视差的工作原理，这样我就不再需要依赖其他人的代码片段，并允许我构建更多自定义效果，所以我所做的只是制作了一个非常基本的文档。

一个蓝色的盒子，一个橙色的方 block 。我把圆圈放在盒子后面，应用了一个变换效果，一点点 CSS，一切看起来都很好。我遇到的问题是——离视点最远的东西不应该比离它近的东西移动得慢吗？我玩弄了这些数字，但无法弄清楚为什么圆圈比正方形移动得更快...

有人能给我解释一下吗？我是不是误会了什么？

<div id="body">
  <div id="box"></div>
  <div id="circle"></div>

#body {
  height: 5000px;
  width: 100%;
  position: relative;
  perspective: 1000px;
  perspective-origin: center;
  transform-style: preserve-3d;
}

#box {
  background: blue;
  width: 400px;
  height: 400px;
  position: absolute;
  top: 400px;
  left: 500px;
  transform:translate3d(0,0,0);
  z-index: -1;
}

#circle {
  background: orange;
  width: 200px;
  height: 200px;
  border-radius: 1000px;
  position: absolute;
  top: 650px;
  left: 350px;
  transform: translate3d(0,0,-2px) scale(1);
  z-index: 1;
}




 window.addEventListener('scroll', function(e) {
  var scrolled = window.pageYOffset;
  var box = document.querySelector('#box');
  var circle = document.querySelector('#circle');

  box.style.transform = `translate3d(0,${(0 + (scrolled * .75))}px, 0)`;
  circle.style.transform = `translate3d(0,${(0 + (-scrolled * .15))}px, -2px) scale(1)`;
});

Link to my test file

谢谢!

Answer 1

#circle 上的 translate3d( 0, 0, -2px ) 变换意味着它将始终位于 #square 之后，即使 #circle 的 z-index 更高。

将其更改为 translate2d(并删除 tz 参数)或将其更改为 translate3d( 0, 0, 0 )。这同样适用于 scroll 事件监听器。

就是说，您不需要任何 scroll 事件监听器。请参阅此示例:它在不使用任何脚本的情况下进行视差滚动:https://codepen.io/tribex/pen/mWNWdz