r2d2 of Speak Creative
3/11/2019 - 3:32 PM

Vanilla JS Scroll Reveal for all templatecontent class

Checks each element based on class if it is inView of the viewport. Then adds class reveal to display in view. Commented out currently is the ability to remove class when element is out of view so it can be triggered again.

reveal.js
content_copyfile_download
let boxes = document.querySelectorAll(".templatecontent");
let inView = elem => {
  return (
    window.scrollY >= elem.offsetTop - window.innerHeight + 200 &&
    window.scrollY <= elem.offsetTop + elem.offsetHeight
  );
};
//let outView = elem => {
//  return (
//    window.scrollY >= elem.offsetTop + elem.offsetHeight ||
//    window.scrollY <= elem.offsetTop - window.innerHeight
//  );
//};

let scroller = () => {
  boxes.forEach(i => {
    if (inView(i)) {
      i.classList.add("reveal");
    }
//    if (outView(i)) {
//      i.classList.remove("reveal");
//    }
  });
};

window.addEventListener("scroll", scroller, false);