simple-parallax-fade.js

/* jshint browser: true */

'use strict';

var viewportWidth = window.innerWidth || document.body.clientWidth;
var parallaxRange = 130;  // How far the background moves from its starting position
var backgroundImages = [].slice.call(document.querySelectorAll('.bannerlax .banner-image'));
var content = [].slice.call(document.querySelectorAll('.bannerlax .banner-heading'));


// Parallax background function
function bannerlax(el, offset, limit, speed) {
    var multiplier = speed || 10; // Keeps scroll limit and parallax amplitude in sync
    el.forEach(function(cur) {
        if (offset < (limit * multiplier)) {
            cur.style.bottom = -(offset/multiplier) + 'px';
        }
    });
}

// Fade out content function
function contentFade(el, offset, limit, speed) {
    var multiplier = 4;
    el.forEach(function(cur) {
        var fadeRatio = speed || 300;
        if (offset < (limit * multiplier)) {
            cur.style.opacity = 1 - (offset/fadeRatio);
        }
    });
}

// Call contentlax and bannerlax on scroll
function scroll() {
    // Get vertical scroll offset
    var offset = window.pageYOffset;
    bannerlax(backgroundImages, offset, parallaxRange, 6);
    bannerlax(content, offset, parallaxRange, 4);
    contentFade (content, offset, parallaxRange, 800);
}


// Only attach listener on Desktop
if (viewportWidth > 1024) {
    window.addEventListener('scroll', scroll);
}