Simple Background Parallax Scrolling Effect – simplax

Category: Animation , Javascript | August 12, 2014
Author: arkaindas
Views Total: 2,773
Official Page: Go to website
Last Update: August 12, 2014
License: MIT

Preview:

Simple Background Parallax Scrolling Effect – simplax

Description:

simplax is a pure Javascript solution to create background image parallax effect when you scroll the web page.

How to use it:

Add a background image to your document body in CSS.

body { background: url('demo.jpg'); }

Add the parallax scrolling effect to the background image with a little Javascript.

window.onload=function(){
  document.body.style.backgroundAttachment="fixed";
  window.onscroll=function () {
    document.body.style.backgroundPosition = "0px " + (0 + (Math.max(document.documentElement.scrollTop, document.body.scrollTop) / 8)) + "px";
  }
}

You Might Be Interested In:


Leave a Reply