Webstandards

Scrolling websites: 10 great examples

The fold is dead, scrolling is fun. Here is a gallery of websites that turn scrolling into a pleasant interaction.

Post author By Maurice Svay
Post date 2011/04/26
9 Comments on Scrolling websites: 10 great examples

The fold is dead, scrolling is fun. Here is a gallery of websites that turn scrolling into a pleasant interaction.

Down to the Wire : The Story of New Zealand’s Internet

This website made by Heyday uses a custom jQuery plugin to create a “geared scrolling” effect.

http://downtothewire.co.nz/the-beginning-1989/

Beercamp at SXSW 2011

In this case, CSS3 transforms are used to create a 3D effect when you scroll.

http://2011.beercamp.com/

Heyday Digital

The navigation menu stays on top and automatically highlights the current section.

http://heyday.co.nz/about/

Ben The Bodyguard

Ben the Bodyguard walks down the street as you scroll.

http://benthebodyguard.com/

Bloom.io

A parallax effect happens as you scroll. Notice the great use of blurred transparent PNGs to create a sense of depth.

http://bloom.io/

Nike Better World

Great use of parallax effect

http://www.nikebetterworld.com/

Coco Cola Daft Punk

Another parallax effect, very similar to Nike Better World.

http://coca-cola.fr/daftcoke/index.html

TED x Portland

Typography “teleports” to the bottom of the page

http://tedxportland.com/

Atlantis World’s Fair

Travel to Atlantis by scrolling the page. In this case, no javascript, only CSS with position: fixed.

http://lostworldsfairs.com/atlantis/

ala.ch

http://ala.ch/ (via David Larlet)

Jan Ploch

http://www.janploch.de/ (via STPo)

Let me know if you have more great examples of scrolling websites.

9 replies on “Scrolling websites: 10 great examples”

Merci pour ces exemples intéressants.

Il y a toutefois un truc qui commence à me gêner sérieusement, avec ce parfait exemple : http://heyday.co.nz/about/

Va sur la page et tape sur la barre d’espace pour descendre d’une page. Tu ne pourras pas lire le haut de la page qui est caché par le menu en haut. L’immense majorité des designers qui font ces menus ne pensent jamais à ceux qui naviguent au clavier, et c’est franchement pénible (pour rester poli ;-).

Sorry, should have written that in English :o)

My point with http://heyday.co.nz/about/ is that this kind of overlay menu breaks scrolling when one uses the space bar to scroll up or down (because it does not take the height of the menu into account to compensate the fact that the browser will scroll one full page according to the window height). This impacts everyone who uses the keyboard to scroll.

I’m amazed that virtually no designer doing those kind of sticky menus knows that one can scroll using the space bar in every modern browser.