Detector for if an element is in-viewport

scrollreveal.js

const THRESHOLD = 0.8; // I find this to be a good number

function isInViewPort(el) {
    // getBoundingClientRect() compared with body scrolltop and innerHeight
    const BCR = el.getBoundingClientRect();

    const elTop = BCR.top;
    const elWidth = BCR.height;

    return  (elTop > 0 && elTop < THRESHOLD * window.innerHeight) || elTop < 0;
}

function reveal(el) {
    if (el.className.indexOf('appear') == -1) el.className += ' appear';
}

var revealingElements = Array.prototype.slice.apply(document.querySelectorAll(".reveal"));

function checkReveals() {
    revealingElements.forEach(el => {
        if (isInViewPort(el)) reveal(el);
    });
}

$(window).scroll(checkReveals);
document.addEventListener('DOMContentLoaded', checkReveals);