let text = `scrolltext `;
let wrapper = document.querySelector(".wrapper");
let tx, ty, midY;
midY = ty / 2 - wrapper.getBoundingClientRect().y;
tx = window.innerWidth;
ty = window.innerHeight;
let char = Math.floor(tx / 100 * 80 / 12);
let lines = Math.ceil(text.length / char);

for (i = 0; i < lines; i++) {
  if (text.length > char) {
    document.getElementById("text").innerHTML +=
      "
" + text.slice(0, char) + "
"; text = text.slice(char, text.length); } else { document.getElementById("text").innerHTML += "
" + text + "
"; } } function positions() { midY = ty / 2 - wrapper.getBoundingClientRect().y; for (i = 0; i < lines; i++) { let ids = document.getElementById(i + "text"); if ( ids.getBoundingClientRect().y < midY + 40 + wrapper.getBoundingClientRect().y && ids.getBoundingClientRect().y > midY - 40 + wrapper.getBoundingClientRect().y ) { //ids.style.transition = "transform .2s"; ids.style.transformOrigin = "20% 50%"; ids.style.transform = "scale(1.1, 1.1)"; ids.style.lineHeight = "1.1em"; ids.style.color = "#ccc"; ids.className += "text"; if ( ids.getBoundingClientRect().y < midY + 20 + wrapper.getBoundingClientRect().y && ids.getBoundingClientRect().y > midY - 20 + wrapper.getBoundingClientRect().y ) { ids.style.transform = "scale(1.2, 1.2)"; ids.style.lineHeight = "1.2em"; ids.style.color = "#eee"; if ( ids.getBoundingClientRect().y < midY + 10 + wrapper.getBoundingClientRect().y && ids.getBoundingClientRect().y > midY - 10 + wrapper.getBoundingClientRect().y ) { ids.style.transform = "scale(1.25, 1.25)"; ids.style.lineHeight = "1.3em"; ids.style.color = "#fff"; } } } else { ids.style.transform = "scale(1, 1)"; ids.style.lineHeight = "1em"; ids.style.color = "#aaa"; } } } addEventListener("scroll", positions); window.addEventListener("load", positions);