A little seen effect in modern web design is the parallax effect or parallax scrolling. Parallax involves layered images that move at different speeds from background to foreground, creating depth and if designed cleverly enough, the illusion of 3D space. The effect can be achieved with plain old CSS and HTML, as well as with jquery powered javascript application jparallax.
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.
Applying parallax with css may look good when applied correctly such as on the SIlverback site, but there is no animation present when the application is seen with simple CSS and HTML. Using pre-built javascript libraries to create the parallax effects also lets the designers control animation, speed, and mouse interactivit.y This really opens up the possibilities of using parallax within a website design to something more than just a pretty picture: with javascript, it’s a pretty, moving picture.
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.
Another application of the parallax effect using javascript is seen on Brett Taylor’s Parallax Backgrounds. In the example, Brett has set the site content to scroll normally but the background cloud layers to be offset, creating a parallax effect as they scroll faster than the rest of the page. The parallax background example shows another, simple way designers can integrate parallax into their sites design using javascript.
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.
This short introduction to the parallax effect in web design shows how the effect can be achieved with javascript, and with clever CSS as seen in the Silverback example. Parallax is an effect that is not seen too often in website design, but with new javascript powered tools it can be applied to a site’s design in innovative and creative new ways. Have you seen the parallax effect used in a website design that you’d like to share? Let us know below.
Follow up with this GrindSmart Media Author: Rosston Meyer through his web portal Rosstamicah.com, via Twitter, and his Websume.