需要帮助修改 skew.js 以进行 Y 轴旋转

Question

Here's the site in question: https://marks-groovy-project-2fa056.webflow.io/

I want to rotate each letter by 90 degrees on their Y axis while scroll is active, and return them back to their original position as soon as scrolling stops.

Visualization: in top view, a letter should rotate 90deg counter-clockwise when scroll is activated, which will render the letter invisible in front view ( the viewport) while scrolling, and then turn back 90 degrees clockwise when scrolling ends, so that each letter is visible again.

Method: used skew.js and slightly modified it:

1. skew.js is applied to an entire section. I want to apply it to every instance of a span with id="letter-animation". I've appropriately renamed the constant and referenced the #.

2. const speed is a remnant from skew.js. I haven't yet figured out how to rewrite it. It expresses the amount of skew as a function of the difference in newPixel/oldPixel. Which I don't want. My rotation needs to be 90deg every time. Once in, once out.

3. letter.style.transform = "rotateY(45deg)" used to be "rotateY(" + speed + "deg)" in the old script. (technically it was "skewY", not "rotateY" but you get my point). const speed would then be replaced with whatever new constant is appropriate as mentioned in point 2.

I've set up this codepen to isolate the script in question. 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()

Here's the tutorial that explains how skew.js works: https://www.superhi.com/video/skew-on-scroll-effect

And here's an example of it working, according to the video tutorial above: 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();

Can anybody help me get this working? So far, the main issue seems to be that they're spans and not sections, but it could also just be my complete absence of understanding of javascript.

I'm hoping to control the transition speed, curve, and delay via css, but if it has to be controlled in JS, i'd also appreciate some advice on how to do this.

Thank you everyone in advance for trying to help.

Cheers, Mark

NOTE: there is another script running (fullpage.js) which simulates a swiping experience during scroll. deactivate it temporarily to get a better view of what's happening during scroll while you're checking things out/setting things up. End-product, a letter animation that synchronously rotates each letter by 90 degrees (rendering the words invisible) for the duration of the swipe/scroll, and returning them to normal once the section snaps into place.

Answer 1

In case anybody is still interested in this, I have figured it out in the meantime.

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

EDIT:

I have improved this script for best-practice purposes. This makes it more stable and versatile because it can now be used together with plugins like fullpage.js. Additionally, if desired, the transforms can now also be called manually by referencing the appropriate function.

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