Transform translate3d on scroll

Question

I want to add a second functionality to some vanilla js code. It now changes opacity on scroll but should also change the value of transform translate 3d on scroll

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;

};

Besides changing the opacity it should also change the transform translate3d value. The second value.

Example:

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

Etc.

What should be added to also change the transform style?

Answer 1

You are going to do the same thing as the opacity except with the transform property.

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

};

Replace 1px with the variable you want it to change to on each scroll.

Keep in mind that this will not work cross-browser in it's current state.

Edit: Seems like the closing semi-colon broke that code, it's fixed now.