My Travel Pictures 2012
A demo of the parallax effect
This website is a demonstration of the parallax scrolling effect. There are many ways to achieve this. In this demo, it is done purely in HTML and CSS.
Parallax in common terms is the apparent faster movement of objects that are nearer the observer. The experience is similar to looking out of a moving vehicle's window. Fences just beside the road seem to pass at great speed, while mountains and farmlands at some distances away seem to move slowly, or not move at all.
Websites achieve the parallax effect by having different scrolling behaviors for foreground and background content. The operative css property is "background-attachment: fixed". When applied to an image, the image's position is fixed and will not move even if the page is scrolled. The foreground content, on the other hand, is free to "float" and move on top of the background image. The difference in foreground and background movement is what the eye perceives as parallax.
Some mobile browsers have a hard time handling parallax effects on small screens. In such cases, especially when the effect gets in the way of clarity, it is sometimes better to turn parallax effects off. This can be done by disabling the effect when screen size is lower than a threshold value.
Some mobile browsers automatically turn the effect off simply because it can consume more computing resources.