The parallax effect has been used in the movie industry for a long, long time. Also, cartoons make great use of this simple technique. The general idea is to have 2 overlapped items moving in different speed ratios, to create an illusion of depth.
Parallax effects can work great even for websites. We can see many uses out there, and today we’ll take it a little deeper and create a banner making use of this technique.
The main challenge here is to do something simple because we’re dealing with dynamic content so everything will change pretty often. Our effect will need, for example, to automatically detect heights, since the only fixed dimension will be the width.
Also, we’ll learn how to do that on the top of a WordPress theme, in our case the Twenty Eleven theme (default theme), but you can easily use the concepts and snippets here to apply on your own theme.
Photo credits joeymc86