Parallax Scrolling Websites: Effective Examples and Resources

Parallax scrolling has been used in computer games for years – it is the effect where the background remains static and the foreground scrolls vertically or horizontally, or vice versa – the foreground remains static and the background moves.

This scrolling method is being seen as the new trend in website design.

There are many different degrees of parallax scrolling, from a complete site with things jumping out when you scroll down the page, to a relatively simple static background with foreground scrolling.

There are also some sites where just moving your mouse around the page makes the elements ‘dance’ – which can be quite confusing, but nevertheless somehow appealing!

Here we have collected some of the best parallax scrolling sites for your perusal. Please visit each site to see the effect.

There is a selection of tutorials and further resources after the showcase.

Parallax Scrolling Websites

Ben the Bodyguard

iutopi

Unfold

WeSC Footwear – The Chase

Nike Better World

David Beckham

Lost World’s Fairs – Atlantis

Web is Beautiful

La gente ha dicho si – Alpro Soja

Finger Billiards

Head 2 Heart

siebennull

cultural solutions uk

Denver 2012 Drupal

YEBO Creative

Kalendiar

FillStudio

Campaign Monitor

We Came From Mars

Jan Ploch

Ap-o

Tutorials & Resources

• How to Recreate Silverback’s Parallax Effect
• Create a Funky Parallax Background Effect Using jQuery
• Using jQuery to Create Parallax Scrolling Backgrounds
• Parallax Effect using jQuery
• Nikebetterworld Parallax Effect Demo
• jQuery and CSS Single Page Portfolio, a Vertical Parallax Navigation Experiment
• Free Action Script: Endless Parallax Scrolling
• Scrolling Parallax: A jQuery Plugin
• jParallax jQuery
• Parallax Background with Javascript and CSS
• Examples of and How to Create the CSS Parallax Effect
• Showcasing the CSS Parallax Effect

Conclusion

If you like the parallax scrolling effects of the showcased websites, the above tutorials and resources should help you learn how to create a similar effect for your site.

Have we missed any effective parallax scrolling website designs out of this list? What is your opinion of this new and upcoming trend?

Please share your thoughts with us in the comments below.