16 of my favourite parallax scrolling websites and resources on how to achieve it

c
April 5th, 2012

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.

Sprinksummer.dk - parallax scrolling holding page

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.

Manufacture d'Essai - parallax scrolling fashion site

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.

Krystalrae website - parallax scrolling

Nike Better World

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

Nike Better World parallax scrolling

Nizo App

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

Nizo App parallax scrolling

Believe in

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

Believe in - Parallax scrolling example by 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.

Slavery Footprint HTML and parallax scrolling example

Hydraulic Fracturing

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

Dangers of Fracking - parallax scrolling

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!

Ben the Bodyguard - parallax scrolling effect

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.

VW Beetle - parallax scrolling

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…

Playten - parallax scrolling and children's apps

Ala Studio

Not exactly parallax, but some nifty sideways scrolling nonetheless.

Ala studio - sideways scrolling

Unfold

A nice slant on the trend with bold diagonal graphics

Unfold agency - graphical parallax scrolling

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.

Bagigia - parallax scrolling

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.

100% New Zealand Travel - parallax scrolling

Here are some resources on how to achieve it:

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

One Comment

Post Comment