Change the class when the element is visible in the viewport

is_in_viewport.js

var visible = document.querySelectorAll('.element');

function isInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
      // when any part of element is visible
      rect.top >= -el.clientHeight &&
      rect.left >= -el.clientWidth &&
      rect.bottom <= window.innerHeight + el.clientHeight &&
      rect.right <= window.innerWidth + el.clientWidth

      // when 50% of the element is visible
      // rect.top >= -el.clientHeight/2 &&
      // rect.left >= -el.clientWidth/2 &&
      // rect.bottom <= window.innerHeight + el.clientHeight/2 &&
      // rect.right <= window.innerWidth + el.clientWidth/2

      // when 100% of the element is visible
      // rect.top >= 0 &&
      // rect.left >= 0 &&
      // rect.bottom <= window.innerHeight &&
      // rect.right <= window.innerWidth
  );
}

window.addEventListener('scroll', function(e) {
    visible.forEach(function(visible) {
        if (isInViewport(visible) === true) {
            visible.classList.add('visible');
        }
        if (isInViewport(visible) === false) {
            visible.classList.remove('visible');
        }
    });
});