Found this scrolling effect on Codepen. Is it possible to adjust the code so that I can target lines of text by class '.hometext', rather than targeting the entire section '#work' as it currently does?
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();
document.querySelectorAll => elements array then for of elements
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();