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
WeSC Footwear – The Chase
Nike Better World
Lost World’s Fairs – Atlantis
Web is Beautiful
La gente ha dicho si – Alpro Soja
Head 2 Heart
cultural solutions uk
Denver 2012 Drupal
We Came From Mars
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
- Examples of and How to Create the CSS Parallax Effect
- Showcasing the CSS Parallax Effect
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.