Parallax scrolling is a relatively new trend in web design. With this effect, you can create an illusion of depth on your webpage. Parallax works by making the background of the webpage scroll at a slower speed that the foreground, thus giving the scene a perceived depth.
So how do we do this? Well, it's quite simple really. Whenever a users scrolls on the page, we'll calculate how much the page has been scrolled. We'll then scale down this 'scroll-height' and move the background image up or down accordingly.
Here's the result we wish to achieve:
Don't worry though, this is just a gif image. The actual result is completely smooth.