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. This is similar to the idea that when you are moving, objects nearer to you move at slower speeds- hence, the background appears to be behind the foreground.
So, how do we achieve this effect? Well, it's quite simple really. Whenever a users scrolls on the page, we calculate how much the page has been scrolled. We 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. Let's get st