Запустить скрипт mousemove, когда div на экране

Question

Я использую событие mousemove для перемещения разных заголовков на моей странице, которая является большой прокруткой.Моя проблема в том, что я использую этот эффект во многих заголовках, анимация медленная, потому что запускаются все эффекты одновременно.

window.addEventListener('mousemove', handleMouseMove);
const spansSlow = document.querySelectorAll('.line-item-top, .explainervideo .flex, .lyricvideos .flex, .videoclips .flex, .socialmedia .flex, .footer-block .flex.line-1');
const spansSlowmid = document.querySelectorAll('.footer-block .flex.line-2');
const spansFast = document.querySelectorAll('.line-item-bottom, .footer-block .flex.line-3');


let width = window.innerWidth;

function handleMouseMove(e) {
  let normalizedPosition = e.pageX / (width/2) - 1;
  let speedSlow = 90 * normalizedPosition;
  let speedSlowmid = 100 * normalizedPosition;
  let speedFast = 120 * normalizedPosition;
  spansSlow.forEach((span) => {
    span.style.transform = `translateX(${speedSlow}px)`;
  });

  spansSlowmid.forEach((span) => {
    span.style.transform = `translateX(${speedSlowmid}px)`;
  });

  spansFast.forEach((span) => {
    span.style.transform = `translateX(${speedFast}px)`
  })
}

Я думал, как решить эту проблему, и я думаю, что лучший способ этоесли я могу поставить любой код, чтобы эффект работал только тогда, когда div на экране.Но я не знаю, является ли это лучшим способом сделать это.

Итак, мне нужно запускать функцию mousemove для каждого DIV, только когда на экране де DIV, поэтому не запускаются все эффекты одновременно, что замедляет работу моей сети.