No doubt, we will be seeing more and more of this effect on the Internet in the future. Funny thing is it’s hardly anything new, we’ve been using it horizontally in flash websites and banners for a long time. I think now that clients, brands and people in general are finally seeing life beyond the fold, scrolling has become a bit of a novelty. We’ve all become so familiar with scrolling it comes second nature, and now that we aren’t restricted to bunging all our content into the top 650 pixels of a web page, WOOHOO – look what I can make my website do!

The trouble for me with parallax scrolling is that it’s just too darn fun to play with – I end up skipping over all the content just to see what happens when the page scrolls.

In any case, it’s still a beautiful thing when done well. Here are 15 of my fav’s:

Spring / Summer Denmark

So simple, but so beautiful. To me the best things in life usually are… A holding page for a new agency that specialises in luxury e-commerce fashion. This kind of thing really rocks my boat.

Manufacture d’Essai

Another example of a fashion brand taking this effect on board. It’s lovely to see big lookbook images being taken out of their square boxes and plastered so large on the page. This coupled with the added effect of feathers, flower petals, butterflies and water droplets scrolling at a different pace to the models makes everything feel so much more alive and vibrant.

Krystalrae.com

Another fashion site I am currently digging. They’ve made great use of their bold contrasting patterns as assets and I love the way the product images and patterns change as you scroll.

Nike Better World

Most people would credit this site as the originator of this trend. Still one of the best shining examples.

Nizo App

A lovely effect to gather many elements onto a page. This has directly inspired a client brief I am currently working on.

Believe in

A nice little manifesto for 2012, by French interactive agency Soleil Noir.

Slavery Footprint

This website has won many awards and has quite likely cropped up on your radar before. It’s a wonderful example of how to make a serious issue more engaging and effective.

Hydraulic Fracturing

Another example of how to make a serious issue more engaging.

Ben the Bodyguard

An app that helps you protect your passwords, photos, appointments, notes and contacts. A lovely way of bringing it to life online with a bouncer type character. So fun!

VW Beetle

This one takes a little while to load but it’s worth it, and you can see how the effect lends itself well to cars and road driving. This site has the neat added feature of being able to control the scrolling of your computers web page with your iPhone too. You simply visit rocknscroll.it on your phone and enter a code to activate – nice seamless integration. Shame the connection is a little buggy (haha, get it?)… the scrolling is not very responsive, especially when you try to change the wheels/scrollling direction.

Playtend Children’s apps

A cute example. One for me to remember for my baby business. Also some worthy apps to download once Fraser gets a little older…

Ala Studio

Not exactly parallax, but some nifty sideways scrolling nonetheless.

Unfold

A nice slant on the trend with bold diagonal graphics

Bagigia

Never mind that this iPad case looks like a hot water bottle! Still a nice way of showing off a product in 360° degrees and beyond. The zipper is a nice added navigation feature too. Sony did something similar with this site but my preference is for Bagigia with it’s clean styling.

100% New Zealand Travel

With stunning photographs of the New Zealand landscapes, this it a totally photographic version of the effect. Along with Nike Better World, probably one of the first sites to start this trend.

Here are some resources on how to achieve it:

• 10 Useful Tutorials And Plugins for creating Parallax and scrolling effects
• Smashing Magazine Parallax scrolling tutorial and demo by Richard Shepherd
• Parallax Scrolling Effect With CSS & jQuery
• FreshD — a jQuery 3D Parallax Plugin
• Parallax website with jQuery and CSS

I came across some of these sites in part by the blog articles below. Check them out for even more inspiration:

• Hot Web Design Trends: Parallax Scrolling Effects in 100 Examples
• Web Design Ledger – 18 Beautiful Examples of Parallax Scrolling in Web Design
• Web Designer Wall – Mind Blowing Parallax Scrolling Sites