The parallax illusion is one of the coolest effects to hit the world of web design. This showcase rounds up the best examples of websites that have a scrolling parallax effect. Some use the effect to add a subtle treat to the website’s background, whereas others use the parallax effect more prominently to create an exciting browsing experience.
The parallax effect has been around for years in classic video games, but came into trend in the web design community when it was implemented into the background of the Silverback app website. The simple type of parallax effect seen on the Silverback site was used to spice the design with a hidden treat, only visible when the user’s browser is resized. The effect has since evolved and is now commonly seen as part of the scrolling feature of a web page, where multiple backgrounds seem to move at different speeds. Fast forward to recent months and the latest incarnation of parallax effects was pioneered by the Nike Better World website, where the whole site is based on one big parallax effect to create an interesting browsing experience.
Vertical parallax & scrolling parallax examples
This showcase of examples pulls together some of the latest and best vertical and/or scrolling parallax effects in web design, starting with the ever popular Nike Better World website. As you can see from the showcase many have been inspired by this example, and some even take it a step further. Be sure to check out each site individually and stroke that scrollwheel to see the full effect.
Nike Better World
Old Pulteney Row to the Pole
The Beatles Rock Band
CSS & jQuery parallax tutorials
Fancy giving it a go with a website of your own? This collection of resources will come in handy. Two of these tutorials cover the process of building the popular vertical or scrolling parallax effect, whereas the third from a few years back looks at the clever CSS behind that original Silverback example.