Showcase of Parallax Scrolling Effects in Web Design

Showcase of Parallax Scrolling Effects in Web Design: "
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.

Para-what?!

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

Campaign Monitor is Hiring

Ben the Bodyguard

Old Pulteney Row to the Pole

DrupalCon Denver 2012

Tribute to Becks by Neil Berry

Netlash-bSeen

Manufacture d’Essai

The Chase – WeSC Footwear

ap-o

iutopi

IWC Schaffhausen

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.

Recreating the Nike Better World Parallax Effect

jQuery and CSS Single Page Portfolio Vertical Parallax Experiment

How to recreate Silverback’s parallax effect

"