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 thoughts on “Scrolling websites: 10 great examples

  1. 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 ;-).

  2. 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.

  3. Dans le genre rigolo, je suis tombé sur ça hier : http://www.janploch.de/

  4. Merci pour ce tour d’horizon, ça donne des idées.
    @STPo : très bon !

  5. Maurice Svay

    @STPo : j’avais regardé ton lien sur l’iPad d’abord et l’effet ne fonctionnait pas, mais en regardant sur mon Mac, c’est vraiment chouette :)

  6. Très très chouette sélection. Ça donne envie de faire que des sites qui scrollent ^____^

    Merci !

  7. Il me semble que Skittles a un site du genre également.

  8. @François Nonnenmacher

    I never used the spacebar to scroll, I might reach over to the up and down arrows instead though :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>