Question

我想在一些普通的js代码中添加第二个功能。现在，它可以更改滚动的不透明度，但也应该更改滚动转换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;

};

除了更改不透明度外，还应该更改转换transform3d值。第二个值。

示例：

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替换为每次滚动时要更改的变量。

请记住，在当前状态下，跨浏览器无法正常工作。

编辑：似乎以分号结尾的代码已损坏，现在已修复。

滚动滚动translate3d

1 个答案: