Parallax Effect in Web Design
One of the most well known individual examples of CSS within the web design community of CSS-based parallax is on Clearleft’s landing page for their Silver Back App. The vines at the top of the page are set as parallax layers.
The images look great as a set of layered static images but there is no mouse interactivity, and the effect can only been seen “in action” while the browser window is being re-sized. Designer Paul Annett says using parallax in such a subtle way where not everybody sees it is “like a hidden Easter egg for those who do.” You can view a full explanation of the css that Paul used for the effect on his article here.
Paul says that designers are free to use the source code from the site to apply the effect to their own designs. He goes on to say that “the technique, combined with others, opens the door to all sorts of possibilities. I can imagine things hiding behind solid foregrounds and only sliding into view as the browser size exceeds a certain dimensions, or elements fading into view as the browser is resized. Show me what you can do!” The effect can also be seen on the footer of the Future of Web Design site, the footer of IconJelly, and in the bird overlay graphics found on the footer of the Forever Circling blog.
One method of applying the parallax effect to website design is with the the jquery powered plugin jParallax. jParallax creates layers that move in response to the mouse. The demo examples of jParallax show how the effect can be used with various combinations of layered graphics and mouse interactivity.
A similar jQuery based parallax effect is called Scrolling Parallax. Scrolling Parallax has more live examples than on the Parallax Background page but the effect and implementation is essentially the same. The layered leaves demo seemingly creates more movement than on the previous cloud example, but it’s really the same effect just with bigger overlapping images. View Jon Raasch’s Scrolling Parallax demo page for examples and source code.