Skip to content

Instantly share code, notes, and snippets.

@SketchBookkeeper

SketchBookkeeper/parallax.js

Created April 11, 2019 19:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SketchBookkeeper/97006dcc74f452f49636979f2fabdc99 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SketchBookkeeper/97006dcc74f452f49636979f2fabdc99 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
parallax.js
// .js-parallax element should have a css bg image.
const parallaxItems = Array.from(document.querySelectorAll('.js-parallax'));
function runParallax() {
parallaxItems.forEach(item => {
const rect = item.getBoundingClientRect();
const offset = ((rect.top / rect.height) * 100) * 0.25;
item.style.backgroundPosition = `50% ${offset}%`
});
}
runParallax();
document.addEventListener('scroll', function() {
runParallax();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment