Grow your CSS skills. Land your dream job.

Fancy Scrolling Sites

Published by Chris Coyier

In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history.

By "fancy things" I mean something happens when scrolling down besides the site scrolling down. Elements might move around in unexpected ways or change their size/shape/color/content in some way. It's easier to just experience some of these yourself than listen to me try to fumble through explaining it. These screenshots also don't do much justice. Many of them are video-documented on this site's YouTube channel.



Dentsu Network

View Site   View Movie



Art of Flight

View Site   View Movie



Ben the Bodyguard

View Site   View Movie



Activated Drinks

View Site   View Movie



New Zealand

View Site   View Movie



ala

View Site   View Movie



Authentic Jobs | Charity Water

View Site   View Movie



TEDxPortland

View Site   View Movie



Nizo

View Site   View Movie


So how do they do that?

JavaScript. They detect window scroll position then do stuff (e.g. apply classes, adjust positioning, whatever) according to that position. There aren't any "helper" libraries for doing stuff like this as far as I know since it's so dependent on what you want to do and it already isn't difficult to detect scroll position.

Know any others?

Add them in the comments.

Comments

  1. Permalink to comment#

    do they use javascript?
    woww.. they have a great idea ..
    amazing!!

  2. Great post! These sites definitely show a high level creativity!

    Suggestion, can you link the graphics to the corresponding sites.

  3. k
    Permalink to comment#

    come on dude, want more help then “it’s javascript” !

    how about a tutorial?

    • Permalink to comment#

      Here’s how you could watch for scrolls and do stuff with jQuery:

      $(window).scroll(function(eventObject) {
        // do stuff! You can find out about how far the window has scrolled via the eventObject.
      });
    • peter
      Permalink to comment#

      How many tutorials do you want?
      Here‘s about 2 million of ‘em:

      Have fun!
      Kind regards,
      Peter

    • Permalink to comment#

      Too bad JavaScript itself doesn’t have something like a window.onscroll event. Thumbs up to the jQuery team for adding that in.
      I’ve tinkered around a bit with scrolling myself and ended up kind of writing my own onscroll detector using timing functions that watched for the changes in scroll position. It also works quite well, but I do worry that it might be processor intensive to run a constant timing function in the background.
      Of course, who knows, jQuery may be doing it exactly the same way. I sure can’t think of any other way they could have done it.

    • Permalink to comment#

      In order to get a smoother scroll, you might get a percentage of document height instead of straight scroll amount.

      I played around with this here: reddirtcollective

      and here: bdw3

      and found that if you use straight scroll amounts, your elements will always be off because javascript isn’t fast enough to track every single scroll pixel, only chunks at a time.

      scroll amt / page height = page scroll percentage

    • Bree
      Permalink to comment#

      Look up “Nikebetterworld tutorial” …

  4. Doug T
    Permalink to comment#

    … and not a single one is responsive or works well on a mobile. Go figure…

    • Permalink to comment#

      Scrolling sucks on mobile (or at least telling where the user is). It is next to impossible, so why would you expect them to work on mobile?

  5. Chris Sobolewski
    Permalink to comment#

    Ugh.. I visited the Dentsu Network site (your first example) and scrolled down using the scroll bar. Then I tried hitting the back button to come back here and view the rest/make some comments.

    Well, my comment is that Dentsu Network is doing it completely wrong. They are actually changing the URL as you scroll. So, when I hit the back button, I had to navigate back through all their anchor tags and then back to this page. That is NOT a good user experience. Haven’t we all learned that “back” is a sacred button that should not be messed with?

    • Permalink to comment#

      Actually, they are doing it right. If you were to manually have navigated through all those pages, you would have been in the same position, they just have a different type of navigation that you are not used to. What if you clicked ‘about’ then another link and wanted to get back to about? You shouldn’t have to scroll back – you clicked the link to get there and the back button should reflect that.

      The problem is how the example was linked out from this site (currently no links actually…?) – when you are writing an article with examples or side points in external links, they should open in a new tab (target=”_blank”) so that you don’t lose your place in the original article.

      If this has been the case, you wouldn’t have had to use the back button – since you were more or less checking out an example from a list, you would just close the example and your list would be still open, in the same place it always was.

    • Andy
      Permalink to comment#

      I honestly don’t remember the last time I used the back button. After the invention of tabbed browsing, it kind of lost all it’s majesty.

    • Chris Sobolewski
      Permalink to comment#

      @Jenius Yes, they should have anchors so the back button can function while navigating the site traditionally, but you should never hijack the user’s buttons and provided them with unexpected functionality. In short… anchors shouldn’t be there, but you shouldn’t programatically change the user’s URL bar.

    • Permalink to comment#

      @chris, what you said makes no sense… you do realize that the back button is linked to the url bar right?

    • bill
      Permalink to comment#

      I agree with your Chris 100%.

      jenius you have no clue.

    • They shouldn’t change the url by scroll position, but yes, when the user clicks the links, there should be anchors.

    • Permalink to comment#

      What you said, Henrique. It’s perfectly feasible for [back] to redirect to a location on the page if you’ve clicked through, or left alone if you scroll. I was unpleasantly surprised that it’d been drowned in entries, too.

    • Joshua Cottrell
      Permalink to comment#

      It also helps SEO (Search Engine Optimization)

  6. Permalink to comment#

    Is it just me or there’s not a single link to those sites? I mean, it’s pretty hard to find “New Zealand” on google..

    • Permalink to comment#

      There are buttons that say “View Site” beneath each. Maybe try flushing cache.

    • Chris Rocks
      Permalink to comment#

      Buttons are not visible.
      Line 606 in style.css

      figure p {
      display: none;
      }

      should be removed.

  7. Permalink to comment#

    Oh, it’s actually the official new zealand site.. but then again, “ala”s even harder..

  8. Konstantinos
    Permalink to comment#

    Come on Chris! How about a tutorial?

  9. Chris rocks
    Permalink to comment#

    Even though I really enjoy watching your casts and reading your articles (even own a book of your), this one reals falls short lol :) Javascript .dot. Well thanks for my rss entry. have a great day

  10. Eduardo
    Permalink to comment#

    this is a local beer website from south brazil :

    http://www.polar.rs

  11. no need for Back BUTTON since all i do is swipe 3 fingers. haha.

  12. Permalink to comment#

    Activated Drinks and Ben the Bodyguard are great.

    The concept of the Nizo web is superb.

    I found the Art of Flying website interesting, technically, but the crazy everything-but-vertical scroll lost me. Can’t imagine how that would “handle” like on a touch screen :P

    Great showcase though, can’t wait to take a look at the code of those.

  13. Permalink to comment#

    The jQuery Waypoints plug-in could potentially come in handy for this sorta thing: http://imakewebthings.github.com/jquery-waypoints/

  14. Piotr
    Permalink to comment#

    Here is another example from Poland – http://team-travel.pl/ .
    100% JavaScript. My coding.

  15. Permalink to comment#

    Don’t know why, I am not finding any way to locate these websites…. Does clicking on image work for you?

  16. Hi Chris, I recently created a post on vertical scrolling parallax sites.

    http://www.alldesignstuffs.com/2011/inspirational-websites-set-2-with-latest-vertical-parallax-scrolling-technique/

    I hope you like them!

  17. Permalink to comment#

    great list, great effect, thanks.
    And by the way, I posted a tutorial on how to recreate the Nizo for iPhone scrolling effect : http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/

  18. Hi Chris,
    Our studio recently launched this site that uses CSS3′s background size to produce different kind of vertical parallax effect.

    http://www.xsbaltimore.com

    Keep up the great work!

  19. Permalink to comment#

    Uh…. Links? Seriously, this article is completely useless without being able to visit the sites.

    • Sarah Saunders
      Permalink to comment#

      what choo talkin’ bout willis? All of the examples have links attached to em. Thats how we all saw the animation and scrolling techniques and are ranting and raving about them.

      Thanks for the post Chris. Nice compilation. These are amazing and I feel very inspired by looking at them all.

  20. Permalink to comment#

    Great post! I’ve been meaning to do a test site to learn how this is all done. Glad you gave a list to investigate. I’ve seen the Nizo site before, but the only others I’ve seen, with regards to “fancy scroll sites”, are from: one I can’t remember right now – a bands site, and the two (El Dorado & Atlantis) from the “Lost World’s Fairs” site… http://lostworldsfairs.com/

  21. Steven
    Permalink to comment#

    Nice article, definitely some cool effects!
    Here’s another one: http://work.nemata.com/renault-laguna/
    No parallax, but innovative use of scrolling / browser canvas aswell.

    • Andy
      Permalink to comment#

      I believe this is using some sort of map api (google maps for example) and instead of a map for the background, it’s using a car image.

  22. I have seen a lot of these sites lately. If you heard of http://www.awwards.com, every 3rd site is vertical scrolling portfolio site. It would be awesome to have a case study here or something. Because this sites have the cool feature of when you pass particular point of the window, it selects the main link or something pops out of the edge, really cool technique. I tried searching for it but I guess it’s a pretty good secret to keep for designers ))

  23. Eddie
    Permalink to comment#

    Very nice roundup! here’s another one: http://22mars.com/

  24. Permalink to comment#

    A great roundup of cool scrolling websites. I actually made a post like this before, which includes a lot of these websites and more: 14 Websites that take You on a Unique Scrolling Adventure

  25. Andrew de Andrade
    Permalink to comment#

    YCombinator Startup OhLife does something interesting with scrolling.

    http://ohlife.com/

    Just click on the footer that asks the Question why you’ll like OhLife.

  26. Keith
    Permalink to comment#

    This might be helpful: Dave Cranwell/jQuery Scroll Parallax Plugin – http://www.davecranwell.com/content/jquery-scroll-parallax-plugin

  27. Permalink to comment#

    As a newbie designer I’ve had my eye on the paralex effect for a while, awwwards has a bunch of them including ones listed here.

    But how to apply to wordpress is my thought. I unsuccessfully tried to add a simple scrollto named anchors on a wordpress site but couldn’t get it to fly and I think because the named anchors were generated with a get slug (as my client will be adding and changing these particular sections.)

    Such a pity for me, as even though its a trend I think it will be a classic one. I certainly never tire of flinging up and down these kind of pages.

  28. Petri Lehtinen
    Permalink to comment#

    The website of PyCon Finland 2011 has a parallax background (implemented with a background canvas), and the top logo also animates while scrolling.

    http://fi.pycon.org/2011/

  29. Permalink to comment#

    You missed this one from Switzerland using html5 and stuff :)

    http://www.360langstrasse.sf.tv/page/

    • Jens
      Permalink to comment#

      Actually it was mentioned above allready, but truely one of the most amazing sites!

      Would love to know how they managed to scroll so smoothly.
      Does anyone know if the Google Street View like behaviour of the “blurry” images is intentional or just conventional? Because the images loaded are full sized. How did they achieve such a fast display?

  30. smoke
    Permalink to comment#

    Hey Chris………………….. http://demo.phpmyadmin.net/STABLE/index.php?token=18fc14fc9dd32572da1e24c1882946c8#PMAURL:server=2&target=main.php&token=18fc14fc9dd32572da1e24c1882946c8 how did this guys do the following menu.. check the menu tabs on window resize. wow.. i wud love to hack that.

  31. Maybe I have a try.the websit of .crusheris good

  32. Permalink to comment#

    Don’t get me wrong, there’s a great deal of creativity going on here, but there’s something about these scrolly sites that bugs me.

    For one, often they’re very dependent on the user having to scroll “in the right way” for the effects to work properly. You can either click pre-determined bookmark links to content, scroll with the mouse wheel, use the scroll bar etc etc. Normally these sites only really look nice if you use the right method, otherwise they can look awful.

    Secondly, if you get the idea wrong you’re just presenting the user with a whole load of mess. Things moving and jumping all over the place, it can be a distraction and turn-off if they’re trying to do too much.

    And lastly, they all seem to require an insane footprint of assets. One of those sites was 8mb!! I’m sorry, but any home page that is 8mb in size is not a good home page in my eyes. Even if these sites were designed in a responsive way, you couldn’t view them on your mobile anyway as they’d take 30 minutes to load!!

    That said, they do look cool and it’s great to see the creative ideas coming out. To summarise; great for showcasing design and coding techniques, but are they examples of “good web design?” I’d have to say no.

  33. Great,

    Another good post by you.
    I would like to have a go at some parralax footers for my sites.

    I am Aaron iamcreative.me

  34. Miss A
    Permalink to comment#

    http://www.google.com/green/the-big-picture.html

    Very nice use of css transitions as well.

  35. Giannhs
    Permalink to comment#

    I didn’t like it… it was a very bad user experience for me, visiting these sites. I don’t get why web designers have to mess up with the scrolling.
    Scrolling is to scroll up and down so that you can easily read what is written in the site. Not to get dizziness and throw all over your screen…

  36. Permalink to comment#

    Thanks for the great inspiring post!
    Websites are thoughtful and perfected.

  37. Megan
    Permalink to comment#

    Would you consider doing a full tutorial on how to create this effect? I’ve been looking and looking and I can’t find one that really goes through it step by step. Please? I think a lot of people would appreciate it.

  38. Permalink to comment#

    This is a great article! I disagree that scroll sites are a trend. I think the way in which we interact with websites is constantly progressing, as is our need to intake information as quickly and efficiently as possible. I’m all for one page scroll sites!

    I found an example of a scroll site fail (i think a site scroll fail list would be amusing), http://www.beetroot.gr/workWhen visiting the individual projects the side scroll is quite sensitive on an mac tracking pad!

  39. Permalink to comment#

    We did this one a while ago:

    http://www.skyartsignition.co.uk

  40. Permalink to comment#

    Andy Griffin, there is actually. Wow you give jQuery **way** too much credit! https://developer.mozilla.org/en/DOM/window.onscroll

    Love the collection. The New Zealand website is so beautiful and perfect. Brilliant. Screw mobile and accessibility =)

    No markdown?

  41. Permalink to comment#

    similar concept could be seen on my portfolio site..

    http://hemantajax.kodingen.com/portfolio/fancy-scrolling

  42. Permalink to comment#

    we did one for our class site a while back:

    bdw3

  43. http://www.martinegoldenbeld.nl/

    Did one myself for a friend, but kept in mind to be search engine friendly.

    So i’ve created a static website and applying javascripts after wards…

    Javascript looks up position on a page and thereby changing the title of the menu and url, so one can bookmark even when scrolled down to contact information.

  44. Permalink to comment#

    Hi Chris, wow what a cool round up! I would agree with the others above that a tutorial on this would be great.

  45. Permalink to comment#

    Superb ideas ..really like it.I’ll try to do like that on ma site…good job

  46. Chris
    Permalink to comment#

    This one is my favorite: http://www.emailology.org

    It is a horizontal scroll but look at the background of the page…..it looks like two backgrounds that scroll at different speeds giving it a 3d like appearance.

    Any tutorial on this would be most appreciated!!

  47. Permalink to comment#

    I found one more: http://www.beetle.de

  48. Michael Tysk-Andersen
    Permalink to comment#
  49. Here’s one simple but fancy example http://apocalypse.pl/ ;-)

  50. Permalink to comment#

    http://www.360langstrasse.sf.tv/page/

    Since it’s in german you won’t understand mutch, but it’s still cool to see the cars and trains moving :)

  51. Permalink to comment#

    have you guys seen the Smartcar website?

    http://www.smartusa.com/

  52. Shylo Hana
    Permalink to comment#

    I like the Firefox OS site

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".