在滚动上实现流体倾斜变换

Question

我一直在尝试重新创建在此网站 www.section32.com 上完成的滚动效果，其中元素与向上或向下滚动相对应而倾斜。

我试图做到这一点的方法是在一个滚动到一个限制时更新 transform:skew 值，然后当它们停止滚动以转换回来时。

但是，这里的效果非常流畅。看看他们的代码，他们正在使用变换矩阵，但不是所有可以在矩阵中完成的事情都可以用正常的变换值完成吗？

如何实现这种效果并使其像这里一样流畅？

这是我的代码：

window.onscroll=function(){
        if(!os) os=window.pageYOffset; //original scrollTop value
        if(window.pageYOffset-os>0 && ns>-3) ns-=0.125;
        else if(window.pageYOffset-os<=0 && ns<3) ns=Math.abs(ns+=1);
        clearTimeout(timer);
        for(var i=0; i<items.length; i++){
            items[i].style.transform="skew("+ns+"deg) translateY("+ns/2+"px) rotate("+ns/-7+"deg)";
        }
        timer=setTimeout(function(){
            //console.log('scrolling done!', window.pageYOffset);
            for(var i=0; i<items.length; i++){
                items[i].className+=" inPlace";
                items[i].addEventListener('transitionend', function(){
                    var n=this.className;
                    n=n.replace(/inPlace/g, "");
                    this.style.transform="skew(0)";
                    this.className=n;
                });
            }
            os=timer=null;
            ns=-1;
        }, 100);
    };

Answer 1

像 @Temani Afif's answer 一样，您的元素可能缺少 transition 属性。

我可以补充的另一件事是（并非您的所有逻辑都在这里，因此您可能已经这样做了）您需要计算滚动的加速度。在您提供的页面中，如果您快速滚动，元素会倾斜更多，如果您滚动缓慢，您甚至不会注意到它们是倾斜的。所以滚动事件的触发频率必须在计算中。

Answer 2

所有元素都做同样的事情，..

而不是循环所有元素并更改变换。

改为更改实际的 CSS。

这是 1000 个 div 的示例。

const stylesheet = document.styleSheets[1];
let a = 0;

for (let l = 0; l < 1000; l ++) {
  const d = document.createElement('div');
  d.innerText = l;
  document.body.append(d);
}

setInterval(() => {
  stylesheet.cssRules[0].style.transform=
    `skew(${Math.sin(a)*20}deg)`;
  a = a + 1;
}, 1000);

<style id="s1" type="text/css">
div {
 transform: skew(10deg);
 width: 40px;
 height: 40px;
 margin: 5px;
 float: left;
 background-color: red;
 transition: 1s;
 color: white;
}
</style>