如何使用Just CSS属性编写jQuery视差效果（转换：translate3d（0,0％，0）

Question

我试图用jQuery编写自定义视差效果函数，只运行该部分的transform属性。

我认为应遵循的步骤如下：

1. 在我想要的div /部分上课，＆＃34;翻译＆＃34;或＆＃34; parallax＆＃34;。
2. 当然，该div定位为绝对值，默认值为0。
3. 在滚动时接近div时，将其顶部值设置为-72px。
4. 然后当用户滚动时，div开始将其翻译值从0.0％增加到16％。
5. 如果用户向上滚动，则将变换从16％，完成值或当前值基于滚动的任何内容反转，返回到0％，即起始值。

CSS是：

.has-parallax {
  overflow: hidden;
}
.image .abs-bg + img { display: none; }
.image .abs-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.image.will-parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate3d(0px, 0%, 0px);
}

现在，当用户滚动页面并接近任何具有.will-parallax类的背景图像的div时，变换值将仅开始改变3d空间的百分比。

使用此类视差的网站示例为https://www.wearecolony.com/

任何人都可以协助编写jQuery代码吗？感谢。