fade-out-elements-as-scroll.js

document.addEventListener("DOMContentLoaded", function() {
    var elems = document.getElementsByClassName("fadeout-as-scroll");
    for (var i = 0; i < elems.length; i++) {
        (function() {
            var elem = elems.item(i);
            var wh = window.innerHeight;
            var start = parseInt(elem.getAttribute("data-start"));
            start = start || wh * 0.1;
            var end = parseInt(elem.getAttribute("data-end"));
            end = end || wh * 0.5;

            var orig = parseFloat(elem.style.opacity);
            orig = orig || 1;
            function doUpdate() {
                var y = window.pageYOffset;
                var r = (y - start) / (end - start);
                r = Math.max(0, Math.min(r, 1));
                var opacity = orig * (1 - r);
                elem.style.opacity = opacity;
            }
            doUpdate();
            window.addEventListener("scroll", function(e) {
                doUpdate();
            });
        })();
    }
});