滚动时变换translate3d

Question

我想在一些普通的js代码中添加第二个功能。它现在改变滚动上的不透明度，但也应该改变滚动上的transform translate 3d的值

window.onscroll = function() {
  var target = document.getElementById("target");

  var height = window.innerHeight;

  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

  // Change this if you want it to fade faster
  height = height / 1;

  target.style.opacity = (height - scrollTop) / height;

};

除了改变不透明度之外，它还应该改变变换translate3d的值。第二个值。

示例：

transform: translate3d(0px, 1px, 0px);
transform: translate3d(0px, 2px, 0px);
transform: translate3d(0px, 3px, 0px);
transform: translate3d(0px, 4px, 0px);

等。

还应该添加什么来更改转换样式？

Answer 1

除了使用transform属性之外，您还将执行与不透明度相同的操作。

  target.style.opacity = (height - scrollTop) / height;    
  target.style.transform = "translate3d(0px, 1px, 0px)";

};

将1px替换为您希望在每次滚动时将其更改为的变量。

请记住，这不会在当前状态下跨浏览器工作。

编辑:看起来结束的分号破坏了代码，现在已经修复了。