Most popular and discussed web design effect of the last few years is the parallax scrolling effect. It involves the background moving at a different speed than the foreground when you scroll down the page.

In this tutorial I will discuss How simply you can add this awesome effect to make your website beautiful.

Concept

Simply we need to make difference between background position and foreground position of the Dom at the time of scroll.

Untitled

Parallax

We’ll add some code that can make body background scroll faster than document scroll.

Behind the scene

First we have to attached an image as a background using css background property.

1
2
3
4
body {
       background: url('https://c2.staticflickr.com/4/3317/3598275271_cee6538dee.jpg');
   /* a random image, thanks google image search!*/
}

Now on scroll we’ll change background position using some mathematical calculation between document scroll position and body scroll position.

before that we’ll also fixed our body background image.

In window onload we’ll initialize all above functinality.

So here is our javascript the code.

1
2
3
4
5
6
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";
  }
}

Now, we are done. Please check the demo and revert if you have any query. In next tutorial we’ll discuss more on advance parallax effects.