需要帮助修改Y轴旋转的skew.js

Question

下面是有问题的站点：https://marks-groovy-project-2fa056.webflow.io/

我希望在滚动活动时，在Y轴上旋转每个字母90度，并在滚动停止后立即将它们返回原来的位置。

可视化:在顶部视图中，当卷轴被激活时，字母应逆时针旋转90度，这将使字母在滚动时在前面视图(视图)中不可见，然后在滚动结束时顺时针旋转90度，使每个字母再次可见。

方法:使用skew.js并稍加修改：

1. skew.js应用于整个节。我想用id=“字母动画”将其应用于span的每一个实例。我适当地重命名了常量，并引用了#.

1. 康斯特速度是skew.js的残余。我还没想出怎么重写它。它将斜率表示为新像素/oldPixel中差异的函数。我不想要的。每次我的轮值都需要90度。一次进，一次出。

1. letter.style.transform =“rotateY(45 Deg)”在旧脚本中曾经是"rotateY(“+rotateY+ "deg)”。(从技术上讲，它是"skewY"，不是"rotateY“，但你明白我的意思)。然后用任何合适的新常量替换const速度，如第2点所述。

。

我已经设置了这个代码库来隔离这个脚本。https://codepen.io/mhedinger/pen/yLJaLmp

const letter = document.querySelector("#letter-animation")
let currentPixel = window.pageYOffset

const looper = function(){
const newPixel = window.pageYOffset
const diff = newPixel - currentPixel
const speed = diff * 11

letter.style.transform = "rotateY(45deg)"

currentPixel = newPixel

requestAnimationFrame(looper)
}

looper()

下面是说明skew.js如何工作的教程：https://www.superhi.com/video/skew-on-scroll-effect

下面是它工作的一个例子，根据上面的视频教程：https://codepen.io/emgiust/pen/rdOJwQ

const section = document.querySelector("section");
let currentPixel = window.pageYOffset

//looper keeps running and keeps track of where the new pixel is
const looper = function () {
const newPixel = window.pageYOffset;
const diff = newPixel - currentPixel
const speed = diff * 0.35;

section.style.transform = "skewY(" + speed + "deg)"


currentPixel = newPixel;

requestAnimationFrame(looper)
}

looper();

有人能帮我把这事做好吗？到目前为止，主要的问题似乎是它们是跨部门的，但也可能是我对javascript完全不了解。

我希望通过css来控制转换速度、曲线和延迟，但是如果必须在JS中控制它，我也希望能就如何做到这一点提供一些建议。

提前感谢大家的帮助。

干杯，马克

注意：还有另一个脚本运行(fullpage.js)，它模拟滚动期间的滑动体验。暂时关闭它，以便更好地查看滚动期间发生的事情，同时检查出/设置事情。最终产品，一种字母动画，在滑动/滚动的过程中，同步地旋转每个字母90度(使单词不可见)，并在该部分插入位置后将它们恢复正常。

Answer 1

如果还有人对此感兴趣，我已经想出了办法。

const letter = document.getElementsByTagName("SPAN");
var timer = null;

window.addEventListener('scroll', function() {
    if(timer !== null) {clearTimeout(timer)}
    timer = setTimeout(function() {
      var i;
      for (i = 0; i < letter.length; i++) {
          letter[i].style.transform = "rotateY(0deg)";
          };
      }, 150);
  
    var i;
    for (i = 0; i < letter.length; i++) {
      letter[i].style.transform = "rotateY(90deg)";
      };
    }, false);

https://codepen.io/mhedinger/pen/yLJaLmp

编辑：

为了最佳实践目的，我改进了这个脚本。这使得它更加稳定和通用，因为它现在可以与fullpage.js等插件一起使用。此外，如果需要，现在也可以通过引用适当的函数手动调用转换。

let letter = document.getElementsByTagName("SPAN");
var timer = null;

var rotateLetter = function() {    
    Array.from(letter).forEach(function(letter) {
    letter.style.transform = "rotateY(90deg)";
    });
    };
var resetLetter = function() {    
    Array.from(letter).forEach(function(letter) {
    letter.style.transform = "rotateY(0deg)";
    });
    };

window.addEventListener('scroll', function() {
    
    if(timer !== null) {clearTimeout(timer)}
    
    timer = setTimeout(function() {resetLetter()}, 125);
        rotateLetter()
        }, false);

https://codepen.io/mhedinger/pen/dypmKZd