Question

我一直试图重新创建在本网站www.section32.com上完成的效果，在滚动中元素因向上或向下滚动而倾斜。

我是如何尝试这样做的，更新转换：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

也许您没有在CSS中指定任何转换，您可以考虑将其添加到CSS文件中：

* {
   transition:all 0.5s;
}

Answer 2

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

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

Answer 3

看到所有元素都这样做，..

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

改为改变实际的CSS。

这是一个1000 div的例子。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

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

3 个答案: