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
Art of Flight
Ben the Bodyguard
Activated Drinks
New Zealand
ala
Authentic Jobs | Charity Water
TEDxPortland
Nizo
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.
do they use javascript?
woww.. they have a great idea ..
amazing!!
Great post! These sites definitely show a high level creativity!
Suggestion, can you link the graphics to the corresponding sites.
come on dude, want more help then “it’s javascript” !
how about a tutorial?
Here’s how you could watch for scrolls and do stuff with jQuery:
How many tutorials do you want?
Here‘s about 2 million of ’em:
Have fun!
Kind regards,
Peter
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.
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
Look up “Nikebetterworld tutorial” …
… and not a single one is responsive or works well on a mobile. Go figure…
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?
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?
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.
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.
@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.
@chris, what you said makes no sense… you do realize that the back button is linked to the url bar right?
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.
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.
The Dentsu Network site isn’t only about the vertical scrolling it also has many internal pages (click the buttons “view our people”, “view our talents”, etc..) the
location.hashis updated so people can share links to inner pages of the site (i.e. featured talents) and also because you can have a mixed interaction (by clicking links or scrolling) so it was better to simply keep it consistent – we didn’t used HTML5 history API because it has bugs on a few browsers and it wouldn’t be feasible or make sense to code static fallbacks to all the pages since the site is so JavaScript oriented and the deadline was short.On the iPad the parallax effect was removed since it wasn’t as smooth as on the desktop and also because iOS 4 doesn’t support “position:fixed” so I used a few tricks to make the scrolling work (which degrades performance as well), another reason is that on the iPad JavaScript execution is stopped after touching the screen for a few seconds (if native scroll is enabled) breaking the experience. It also wouldn’t look as cool since you have a smaller screen area the interaction is totally different (we decided to add gestures support and snap the positioning instead).
Note that Dentsu Network also have a mobile version of the site: m.dentsunetwork.com – requires less bandwidth and is optimized for smaller screens.
I was the lead front-end dev of the Dentsu Network desktop website but it doesn’t mean I agree with all the decisions tho, just trying to explain why the site behaves that way.. – This is my personal comment and not of my clients or employers – I really enjoyed coding it and the final result as well.
Cheers.
It also helps SEO (Search Engine Optimization)
http://www.nikebetterworld.com
ah yes this is the one I remember seeing. thanks for mentioning it
Here is another one, though it doesn’t work as well as it used to:
http://2011.beercamp.com/
The information on how it was done can be found here: http://2011.beercamp.com/colophon/
Actually, Dave DeSandro (genius guy, btw) open-sourced the code from the beercamp site today
yes I love this one. so good! remember seeing it a while back
A subtle use of the scrolling triggered effects at SophyWong.com
Oh man, I see sooo many scrollsites lately. Definately a trend.
@k : There is a awesome article on Smashing Magazine, sorry for the spam en this site. But it’s a great explanation of how scrollsites work:
http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/
The most amazing I have seen lately is http://sf-langstrasse.hvo.ch/page/
That is so TRUE!
Does anyone know though how they managed to scroll that smooth?
Id really like to know that for a completely different thing, but this is just too good.
They scroll 1050 images!!!!
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..
There are buttons that say “View Site” beneath each. Maybe try flushing cache.
Buttons are not visible.
Line 606 in style.css
figure p {
display: none;
}
should be removed.
Oh, it’s actually the official new zealand site.. but then again, “ala”s even harder..
Google has a tutorial for app-developers on a scrollsite. http://www.guidetotheappgalaxy.com/
Come on Chris! How about a tutorial?
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
this is a local beer website from south brazil :
http://www.polar.rs
no need for Back BUTTON since all i do is swipe 3 fingers. haha.
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.
The jQuery Waypoints plug-in could potentially come in handy for this sorta thing: http://imakewebthings.github.com/jquery-waypoints/
I love this! Seen many other websites that use that effect. Here’s one i really liked:
unfold
http://www.qualitycabinets.com » not only takes advantage of “fancy scrolling” but makes use of layering multiple images over each-other (full disclosure: I work for the company that made this, but wasn’t involved in the project at all)
That is a totally pleasant effect. Tell them well done.
Also, this article needs links. Cheers!
Here is another example from Poland – http://team-travel.pl/ .
100% JavaScript. My coding.
Don’t know why, I am not finding any way to locate these websites…. Does clicking on image work for you?
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!
http://www.bmw.com/com/en/newvehicles/mseries/m5sedan/2011/showroom/highlights/highlight.html
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/
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!
@Christian
Awesome Website http://www.xsbaltimore.com
Thanks for sharing !
kinderueberraschung.de is another very good example
Here’s another one to check out…. http://www.asb.co.nz/futureready/online.aspx
Hi,
Here is my animated resume
http://www.cesar.lc/cv
Uh…. Links? Seriously, this article is completely useless without being able to visit the sites.
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.
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/
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.
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.
Preview11 a school project with this effect
Here’s a recent site I worked on. But it seems to pale in comparison to some of the other sites posted here. Very cool stuff everyone!
stumptown.danner.com
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 ))
Very nice roundup! here’s another one: http://22mars.com/
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
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.
This might be helpful: Dave Cranwell/jQuery Scroll Parallax Plugin – http://www.davecranwell.com/content/jquery-scroll-parallax-plugin
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.
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/
You missed this one from Switzerland using html5 and stuff :)
http://www.360langstrasse.sf.tv/page/
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?
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.
Maybe I have a try.the websit of .crusheris good
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.
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
http://www.google.com/green/the-big-picture.html
Very nice use of css transitions as well.
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…
Thanks for the great inspiring post!
Websites are thoughtful and perfected.
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.
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!
We did this one a while ago:
http://www.skyartsignition.co.uk
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?
similar concept could be seen on my portfolio site..
http://hemantajax.kodingen.com/portfolio/fancy-scrolling
http://www.werbungrockt.de/
is also a cool one
we did one for our class site a while back:
bdw3
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.
Hi Chris, wow what a cool round up! I would agree with the others above that a tutorial on this would be great.
Superb ideas ..really like it.I’ll try to do like that on ma site…good job
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!!
I found one more: http://www.beetle.de
There is also: http://www.melancholiathemovie.com/
Also: http://www.mattalarie.com
Here’s one simple but fancy example http://apocalypse.pl/ ;-)
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 :)
have you guys seen the Smartcar website?
http://www.smartusa.com/
I like the Firefox OS site