Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment