Scroll上的JavaScript视差变换转换

我正在尝试设置一个类似视差的背景。这里的目标是让某些元素在不同的滚动高度上变换：translate（）。我见过很多人用jQuery来做这件事，但考虑到我对JS非常陌生，我更喜欢JavaScript方法

我的代码目前看起来像这样

window.onscroll = function() {
  windowScroll();
};

function windowScroll() {

  var scrollInput = window.scrollY;
  console.log("scroll from top: " + scrollInput);


  var portrait = document.querySelector(".portrait");
  portrait.style.transform = "translate(0px, + 'scrollInput' /2 %)";
}

你可以用

通过使用此选项，您可以看到更多平行效果