Background Only

In this section we are sliding the background at a different speed to the rest of the page.

As this text box is scrolling at the same speed as the page, and faster than the background, it creates this lovely parallax effect.

You can find all the HTML, CSS and the all important JavaScript files over at GitHub - so why don't you drop by for some hardcore forking action?

Backgrounds for this article were taken from the May/June 2011 Smashing Magazine Desktop backgrounds.

Head back to Smashing Magazine, or hop on over to RichardShepherd.com.

Scrolling Sprites

The next step in your parallax scrolling adventure is to create some sprites!

I have cut out one of the photos in this background and use it as a sprite. It scrolls at a different speed to the background and the window, and it's this effect that's used so well on Nike Better World and other parallax sites..

Using too many sprites can slow down older computers, and you need to use some clever maths (and trial & error!) to work out their placement on the page.

HTML5 Video

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. o.