滚动上的倾斜文本，如何定位 class 而不是部分

Question

在 Codepen 上发现 this 滚动效果。是否可以调整代码，以便我可以通过 class '.hometext' 定位文本行，而不是像目前那样定位整个部分 '#work'？

const section = document.querySelector("#work");
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.05;
  
  section.style.transform = "skewY(" + speed + "deg)"
  
  
  currentPixel = newPixel;
  
  requestAnimationFrame(looper)
}

looper();

Answer 1

document.querySelectorAll => 元素数组然后对于元素

const section = document.querySelectorAll(".hometext");
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;

    //for of elements
    for(let el of section){
        el.style.transform = "skewY(" + speed + "deg)"
    }

    currentPixel = newPixel;

    requestAnimationFrame(looper)
}

looper();

滚动上的倾斜文本，如何定位 class 而不是部分

skew text on scroll, how to target class instead of section

javascript

jquery

codepen