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?

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!

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.