{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

In the past year or so there has been a trend in web design towards the use of scrolling, which can help to engage visitors and provides a feeling of movement and animation.

These web pages are entirely static, and rely on the visitor to interact in order to generate the ‘movement’. Back in the day if you asked for this a developer would reach for Flash, but nowadays HTML5 (which has a <ParallaxScroll> tag), CSS3 and JQuery are usually employed to achieve scrolling effects.

I’ve collected a bunch of scrolling websites that are built with the arrow keys in mind. Some of these are more 'animated' than others, and some scrolling websites feel a little bit clunky, but all of them are interesting and creative web experiences. 

I’m not yet convinced that scrolling is something that e-commerce companies should be embracing en masse, but it can certainly be used to support brand and product campaigns, given that the best examples are inherently narrative. Portfolio-based websites (such as the two agency sites I've featured) are another area where scrolling could come into play.

Scrolling, scrolling, scrolling, keep those websites scrolling…

Volkswagen’s amazing non-animated animation

The VW Beetle website invites you to scroll down a very long page. When doing so it appears as if the page is animated, when in fact it consists of lots of stills. Hold down the bottom arrow key when you visit the page to kickstart the experience.

Smart USA

Like the Beetle’s website, this invites you to press the arrow key to scroll down the page. Try it…

 

Activate Drinks

A compelling one page, product-focused website that employs parallax scrolling to full effect.

Dangers Of Fracking

This anti-fracking website works like an infographic. The long page encourages scrolling to provide a narrative, learning experience for the visitor. Scroll down deep into the ground…

Nike Air Jordan

Nike has form in this area, using parallax scrolling as a conduit for storytelling. Check out the Jumpman site…

Inception Explained

Personally I figured out Inception in a dream but if you need help then aim here, and – I think you’ve got the idea by now – hold down that bottom arrow key.

Nintendo Australia

This is more of a horizontal scrolling experience that plays on the theme of Mario Kart…

‘Hero’ Wordpress Theme

Not a full-on scrollfest but a charming use of the header area, which makes use of parallax scrolling, to highlight the messaging in this area as the visitor naturally scrolls down the page.

World’s Highest Website

Perhaps a better description would be the world’s craziest website, this experiment in CSS revealed that the Firefox browser doesn’t know how to deal with a website that is almost 19 kilometres high! That’s right, 19 kilometres. There is an elevator should you not feel like scrolling all the way down.

One Design Company

A web development company that encourages left and right scrolling to access its various ‘pages’. The whole site is like one big single page canvas, which can be explored horizontally and vertically. 

Bagigia

Is it a hot water bottle? Is it a bag? It’s both! I love a product with a story and this kind of scrolling website is a good way of engaging the visitor to find out all about it.

Apologie Paris

I see your scrolling and I raise you a barrel roll…

Carnation Group

An interesting web experience from this creative agency which combines scrolling with drag and drop image functionality.

Smart Argentina’s delightful Twitter account

I’ve featured Smart already but this is a brilliantly creative use of Twitter, as opposed to a standalone website. Visit the company’s Twitter page and then hold down the ‘J’ button on your keyboard (or ‘K’ if you feel like reversing). Amaze! 

There are a bunch of other scrolltastic websites out in the wild, so let us know what you see. I’m particularly interested in product-focused websites, especially ones that include ecommerce functionality. 

Econsultancy's Punch event is where 'Marketing meets Creative in the age of data and insight'. Curated by Creative Review, this event showcases the best of insight-driven creative. This event forms part of our week-long Festival of Marketing extravaganza.

Chris Lake

Published 12 April, 2012 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (47)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

crockett

about 4 years ago

Avatar-blank-50x50

Lawrence Everard

Some wonderful examples, not only of design and execution, but of storytelling as well.

Particularly like the Dangers Of Fracking

about 4 years ago

Mark Selwyn

Mark Selwyn, eCommerce and Multi-Channel Retail Consultant

I'm sorry, but IMHO its like Back to the Future......a spinning thing saying LOADING and nothing much happening while its LOADING.

As Nielsen says, in 15 years, all we've done is gone from slow sites with big images on a dialup to slow sites with fancy widgets on broadband.

Sure, clever and visually interesting, but slow response times and a poor user experience. I bet the bounce rate on these sites is massive.

Now, if they were as clever as they thought they were, they would auto-detect my 2Mb linespeed and serve up something more appropriate.

about 4 years ago

Alan Charlesworth

Alan Charlesworth, lecturer / researcher at University of Sunderland

Some very clever stuff - and reasonably entertaining to look at, but ...

... although I can see aspects of 'branding' in some of these, do any of these sites have real marketing objectives? If so what are they and how are they measured for ROI? And what customers/consumers needs are being met by these sites?

More style over substance?

about 4 years ago

Chris Hoskin

Chris Hoskin, Chief Marketing Officer at Innoverne Limited

Another for your list - which I've admired for a while:

http://www.hegartyonadvertising.com/

about 4 years ago

Avatar-blank-50x50

Claire Leslie, Marketing and Communications Manager at Intellect

'The Connected Home - A Reality'is another great example of a scrolling site - http://www.intellectuk.org/connectedhome/

about 4 years ago

Avatar-blank-50x50

Tony Swaby

Yep, shocking load times. As Mark said "back to the future" not worth the wait and dodgy navigation, I've never had a scroll wheel mouse. And some of them have won awards...haha

about 4 years ago

Avatar-blank-50x50

Matt Wilkinson, Senior Ecommerce Manager at Gatwick AirportEnterprise

@Mark interesting view point. I have personally always believed that the web was about pages that scroll. If you don't want it to scroll buy a book. Just look at the way tablet and mobile design encourage the user to scroll through things. Sure these examples are on the edge of some usability best practise, but you have to admire the way they work and then imagine this on your TV with a kinect interface. Sometimes we have to push design to progress and these are some great examples.

about 4 years ago

Philip Barnes

Philip Barnes, Business Development Manager at Evolving

Great selection of examples - I love the concept for brochure style sites - products that tell a story. You've missed a fantastic example though, the new Mercedes A Class site. Check it out as well.

Load times is an interesting debate. You have to consider the fact that broadband is getting quicker and quicker though. Look at Virgin Media doubling speeds like that. BT Infinity etc with the rest to follow presumably as infrastructure improves. Slow connections shouldn't limit imagination on this.

I do however disagree with VW's mobile scrolling page. Do I want to waste several MB of data on your site - no!

about 4 years ago

Mark Selwyn

Mark Selwyn, eCommerce and Multi-Channel Retail Consultant

@Matt - my problem's not with pages that scroll, its about the sluggish response times that most of these sites exhibit.

You're right - tablet and mobile design do encourage scrolling through things, but generally not at the expense of usability.....they can't afford to as the next site is just a click away.

beetle.com may be really great....I don't know though as I gave up after about 20 seconds.

Nielsen "A snappy user experience beats a glamorous one" and "A 10-second delay will often make users leave a site immediately".

about 4 years ago

Avatar-blank-50x50

Alan Charlesworth

Some very clever stuff on show in these, and quite entertaining but …

I do wonder what the objectives of these sites are? And how do you measure ROI?

And what customer/consumer needs are being met?

A triumph of style over substance?

about 4 years ago

Avatar-blank-50x50

Claire Leslie, Marketing and Communications Manager at Intellect

Agreed Nielsen "A snappy user experience beats a glamorous one" and "A 10-second delay will often make users leave a site immediately".

about 4 years ago

Philip Barnes

Philip Barnes, Business Development Manager at Evolving

There's two counterpoints to Nielsen's facts and figures;

1) No one talks of a snappy user experience. 'Glamorous' campaigns (i.e. innovative and creative) get the bulk of PR. Also, this post was made and is getting quite a lot of responses. I don't think a post '14 best snappy response websites' would go down as well.

2) Wouldn't users wait 10 seconds if it's hyped to be a new online experience - backed up the PR? Surely this stat just applies to booking a hotel or buying a book, or something other mundane task that could be done elsewhere. Then you wouldn't wait.

about 4 years ago

Avatar-blank-50x50

Matt Wilkinson, Senior Ecommerce Manager at Gatwick AirportEnterprise

@Philip totally agree with point 2! well, I would like to think users would be prepared to wait for something more engaging/creative.. but that's the designer inside me speaking ;-)

about 4 years ago

Philip Barnes

Philip Barnes, Business Development Manager at Evolving

Matt I totally agree.

I suppose what we're all getting at is the perfect mix of the two. User experience 'snappy' but keeping creative teams happy!

about 4 years ago

Mark Selwyn

Mark Selwyn, eCommerce and Multi-Channel Retail Consultant

"Wouldn't users wait 10 seconds if it's hyped to be a new online experience - backed up the PR?". Dunno, but sounds like a great #econmsc research project.

about 4 years ago

Avatar-blank-50x50

Matt Wilkinson, Senior Ecommerce Manager at Gatwick AirportEnterprise

So where do we reckon the new (and much talked about) www.fourseasons.com website sits in this debate.. its scrolls (not as creatively as examples above) but functionally and for speed it ticks a few boxs??

about 4 years ago

Avatar-blank-50x50

Mark

I have to agree with Mark and Tony, most of these sites are shockingly bad.

I thought we were all past mystery meat navigation but I see it's back with a vengeance.

Pity the poor web user.

The VW in particular is an absolute dog's breakfast.

There were a few exceptions, the Hero and Carnation sites were actually better thought out.

And in regards to Phillip and Matt's assertion that users will wait 10 seconds, I'm sorry but the latest research shows that you are dead wrong.

Users will wait less time than it takes to blink an eye before abandoning a page. That's nowhere near enough time for these pages to even get started.

http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?_r=3&pagewanted=1

about 4 years ago

Maria Morais

Maria Morais, Customer Engagement & Commerce Retail Lead at IBM

As a user, I waited 10 seconds without any problem, just because I was curious about the new online experience. Maybe these websites get hype only for a few hours (while it's new) but in the end of the day what really matters is the ROI.
Turning customers into advocates (Because brands are a group of individuals that share knowledge and not a result of an enlightened team anymore) is a question of delivering value and support along with an excellent service. These websites are trying to deliver entertainment, which is a valid way of giving value I think.

about 4 years ago

Philip Barnes

Philip Barnes, Business Development Manager at Evolving

I agree with Maria. Mark - your view is quite strong against it. The research cited mentions 'The two-second rule is still often cited as a standard for Web commerce sites.'

These are examples of creative digital advertising. If it's going to be an engaging experience, people will wait. Did you hear of the 'Take This Lollipop' Facebook experience? At least 14 million worldwide have. Videos on Youtube, you wait for them to load to get the experience.

I agree if it's a commerce site it has to be quick and to the point, no flash and simple nav, 1-2 clicks to get where you want to go. For creative ad campaigns though, these examples should push the boundaries of digital tech capabilities. Otherwise we'll just be putting bland into brand.

On a separate note, VW and Merc no doubt have some of the best marketing talent and agencies on-board, so they'll have thought things like this through well. For an online brochure that otherwise I'd never have read (through mail or dusty showroom shelf), it works for me. I don't even like the A Class but had a good look at it through this;

http://a-class.mercedes-benz.com/

about 4 years ago

Philip Barnes

Philip Barnes, Business Development Manager at Evolving

^^ Matt - that Four Seasons '$18m' site is definitely a great example - must be the industry benchmark now for hotels!

about 4 years ago

Tom Howlett

Tom Howlett, Digital Marketing Executive at Koozai

I love the Nike Air Jordan website, it is done so well and I'm sure it will inspire a few more sites as well. Nike seem to be at the forefront with their web designs.

about 4 years ago

Avatar-blank-50x50

Rui Gouveia

Another example of this concept, to presente the team from Portugal´s digital marketing agency comOn.
http://team.comon.pt

about 4 years ago

Avatar-blank-50x50

Paul

Also see Art Of Flight Movie (Webby Nominated) http://artofflightmovie.com/

And this interactive infographic: True cost of an iPhone http://www.mbaonline.com/cost-of-iphone/

about 4 years ago

Philip Barnes

Philip Barnes, Business Development Manager at Evolving

another recent example, only live at the weekend;

https://victoriabeckham.landrover.com/INT

about 4 years ago

Avatar-blank-50x50

Catherine Joyce

Great post! I'm interested to discover how such sites can be flagged up to search engines. Reading it as straight html the only clue is in the title tag and possibly the url at a pinch.
Checking it in 'Rankchecker' #4 for 'Fracking' it clearly is achieving visibility. When I looked at the backlinks they where modest and mostly from blogs. The strength of this site, and why we see it at all is based on good old social media.
So it's not just the technology of the websites that is changing, the way that we get to know of its existence is in this case due to our love of being social. Together with coupled Google's recent changes in it's algorithms to reflect this sea change.

about 4 years ago

Avatar-blank-50x50

Book

Greetings! Very useful advice in this particular article!

It is the little changes that will make the greatest changes.
Many thanks for sharing!

almost 4 years ago

Avatar-blank-50x50

Anna Corp, Online Marketing Manager at Debenhams

I don't like them. I want to click, I want to navigate, I want to read more.

Perhaps I'll get used to them but apart from looking pretty I don't really get them.

almost 4 years ago

Avatar-blank-50x50

Eric

How do they perform in user testing? Are real users doing as the designers assumed/hoped? Answer may be "yes," but question work asking.

almost 4 years ago

Avatar-blank-50x50

Mukesh Dutta

These are amazing websites. I really liked the concept of Inception. Thanks for coming up with them!

almost 4 years ago

Avatar-blank-50x50

shashi kumar, personal at personal

really such a useful information and i liked this site there is huge information.....like to come again

almost 4 years ago

Avatar-blank-50x50

Alex

Interesting article. I like the anti-fracking website. It is very original.

almost 4 years ago

Avatar-blank-50x50

Clippingimages

Great job on this! You made something that is usually pretty confusing very simple and easy to understand. I LOVE your tutorials!

over 3 years ago

Laura Phillips

Laura Phillips, Digital Marketing Executive at Koozai

Some great examples there! Creative thinking like this can really help a company stand out form the crowd and stick in people's memory. Hopefully that will help the brand and make people more likely to share and revisit should they or a friend require such services as they offer.

over 3 years ago

Avatar-blank-50x50

Desmond Durban

Website design can work or completely suck - so we chose the Parallax effect to go on our website re- design for October 2012. So we went the "scrolled pixels" route and the result is cool. Oh by the way this is the ONLY fully responsive web design based on Parallax that I have seen so far - its on http://www.goldtree.co.za

over 3 years ago

Avatar-blank-50x50

Lindy Asimus

I'd be impressed if there was a review on how 'good' these sites are from the point of view of the Google bots.

over 3 years ago

Avatar-blank-50x50

newtonfig

this whole trend is a flashback to . . . the grave abusive years of Flash websites. a true Flashback:). i.e. developers and UX designers abusing the audience with a lot of strut, but overall pretty awful usability. My brand new MacBook Air can barely play some of these sites. And I saw the Smart Car site gave up already

There will be some types of sites that this kind of scroll UX is appropriate for, but I guarantee the Red Bull and Anthropologi hipsters that buy in to these painful UX's will drop them in a year when too many customers complain, or they see their analytics dropoff rates. I think virtually every hip online retail store has already gone through this with Flash we've gone through all this before in the first half of the 2000s.

Note that the most powerful consumer websites on earth have deplorably boring UX and UI. But thats what the masses can handle. Mobile is puhing us backwards a bit right now, but thats the moment we are in. All my clients are asking for UX/UI that is "mobile friendly" and thus, responsive, adaptive or just so 5 years ago.

over 3 years ago

Avatar-blank-50x50

John V

Since when does HTML5 include the ParallaxScroll tag?
(Hint: It doesn't)

over 3 years ago

Carl Duncker

Carl Duncker, Digital Marketing Consultant at Maverick Digital Media

Great examples, the fracking example particularly relevant, linking to the news at the moment!

over 3 years ago

Avatar-blank-50x50

Justine Philp, Sputnik Agency

I too am interested (from a non-techy POV): How does setting up a website using the scrolling technique impact SEM, tracking and analytics...? E.g Beetle, with so many separate sections, product information etc etc

over 3 years ago

Avatar-blank-50x50

Matt Magi

Some good examples in here, thanks for sharing this. Ive been looking for some unique and clean and simple ways to use the parallax effect.

over 3 years ago

Avatar-blank-50x50

Juan

What about Life of PI?

about 3 years ago

Avatar-blank-50x50

Rebecca Caroe

I am surprised nobody else has mentioned this in the discussion - but clearly you're all designers and none of you have to do new business for your agencies.

These sites are USELESS for directing readers to one specific part of the site because the whole page loads off one URL.

IMO they are beautiful and easy to read but they're hopeless for social sharing, SEO and hence, new business.

By co-incidence I wrote about this on April 23rd - Your One Page Website does not help your Biz Dev.

http://creativeagencysecrets.com/your-one-page-website-does-not-help-your-biz-dev/

about 3 years ago

Avatar-blank-50x50

Kev

Our's just went live:

http://www.ki-media.co.uk

I'd love feedback on it

about 3 years ago

Avatar-blank-50x50

pramod chaudhary, SEO at Opusys

Great, actually i have seen these pictures and really appreciating your ideas about scrolling web design - http://www.desertcomputersolutions.net/

almost 3 years ago

Avatar-blank-50x50

Chris Forscutt, Director at Full English

We just relaunched our Full English web-site http://www.fullenglish.com with some home page animations on scroll to summarise a little about us, love any feedback @FullEnglishHQ

over 2 years ago

Kristian Bannister

Kristian Bannister, Creative Marketing Executive at No Pork Pies

I have been meaning to have a crack at one of these types of sites. We've finally got round to making ours live: http://www.motoringassist.com/motoring-advice/history-of-automobile-safety/

almost 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.