Cool plugin, but I can't help but think of that quote—“Scrolling is the new flash.” Not trying to hate on your plugin or code, but I really hate all this scrolling stuff people are doing now. I wanted to scroll, not have a bunch of crazy animations explode in my face.
I feel like the popularity of this effect is to some extent a symptom of our society's constant information overload, and the attendant inability to slow down and focus, which then compels sites to compete for our attention with increasingly flashy presentations. Of course, to a much larger extent, it's probably due to cargo-cult website design.
Unless it's done really well and used properly, I think it's a major case of style over substance.
If anything, I think it could be better used more subtly. For example, a steampunk site that has cogs and gears that rotate when you scroll.
But for a full on website, it makes it incredibly hard to scroll and scan, because nothing's fixed into position. It's telling that on the demo site, the actual content at the bottom has no animated elements.
Not to put it down or anything, of course. I think the worst example I've seen is the SWTOR page (can't find the link anywhere). It feels like it was done just because it's trendy.
Well I worked previously as a Flash dev, so guilty as charged, haha
Personally, I always hated the overdone Flash stuff as well. And the scrolly stuff can get out of hand, that's for sure, but sometimes it is really cool. Ben The Bodyguard is a good example.
I just tried out Ben the Bodyguard [1], and honestly, though I see what they're going for, the interaction is not great. For one, as I scroll into the animation, there's a big spike in CPU and the browser freezes for a second. Then, I have to do my best to scroll at just the right speed in order for the animation to look smooth, and to be able to read the text. I guess this is kind of cool, and maybe many people enjoy it, but for me, it's an awful lot of work you're asking me to do to find out about your product. (Your as-in “one”.)
Yeah, this highlights another point—the animations (and the effort required to view them) can be so distracting that this may not even be an effective way to educate me about the product.
it's a neat effect that just became possible, like morphing. When something new becomes possible everyone wants to find an excuse to try it. Welcome to being human and having joy in what you do. Even if it's not "effective" at "informing" or "achieving business aims". you know. Boring things.
1) I use a mouse with a scroll wheel and the default setting is to scroll three lines at once, and I use the scroll wheel a lot. None of the scrolling effects ever look good for me, and if it's a site which depends on the scroll effect to communicate (a few marketing sites have done this) then I don't get the message.
2) When I use keyboard shortcuts (which I do quite frequently buy I realise most users don't), I just hit page up and page down. I see none of the effects.
To me, this is as bad as hover effects on tablets. I just can't see how it helps to improve user experience or accessibility. Sure, sometimes that isn't the desire but even in the case of those marketing sites I'm fairly sure the marketing men behind it would be appalled to find out some of their target audience was communicated to poorly. Though the worst thing is those same people on other sites then disable some key presses and default keyboard short-cuts to make sure there is no choice but to go through the bad UX to be communicated to.
What worries me when I see these things so high up on HN is that I fear others think this stuff is good.
Is that the case? Is it just me who prefers the idea of the client determining how to render something and not putting such stuff on the websites we create, or to put accessibility to all pretty high up?
I had to go back to that page and go through it again using the cursor keys rather than the pg-dn button, because I hadn't realised the page did anything.
Unfortunately its a does not work well with iOS as it doesn't update until the scroll event is finish -- resulting in a somewhat jumbled and confusing experience without the animations. No doubt this is due to the way Mobile Safari conservatively updates events to save power.
Awesome job! OS X Chrome 16.0.912.63 has some stuttering when using trackpad scrolling, but it's surprisingly smooth for all those animations!
By no means is this meant to dissuade using Scrollorama, but for very long pages (like the demo), I tend to flick the trackpad up to scroll through and stop it when I see the content I'd like. However, I find it's hard to follow the sections because they're almost in a constant state of transition. I'd love to see this used on a site with lots of dummy content, since I assume if it's padded with text or photographs, it will flow much better.
Is this a bug in firefox 8.01? When scrolling up, the O overwrites the adressbar, bookmarkbar and part of the main menu. Upgrading to 9.01 made the effect less visible, since now only a small part of the O can end up covering the firefox UI.
EDIT: It can in fact cover parts of the main menu in 9.01 just as in version 8.
Fixed the scrolldeck link, thanks. That's another plugin I made that is for making html slide deck presentations (similar to deck.js or reveal.js) and uses Scrollorama for navigation and animations.
To fix the jerkiness, I could animate the css props but that would probably cause quite a performance hit. If anyone wants to fork it and make improvements, please feel free!
Very cool. Nitpick: would be nice if it smoothly animated when using the scrollwheel - it's pretty jumpy using the wheel, but awesomely smooth with the scrollbar.
This script seems to trigger a bug in Firefox or X11 which brings the whole session down.
It's 100% reproducible with my setup: Firefox 9.0.1 on Ubuntu 10.04 (x86_64) and Fglrx 8.920 (Catalyst 11.11, if I remember correctly). Load the page then scroll down a bit: the whole X session blows up.
Totally random, but I scrolled down this page while listening to Limp Bizkit's "Take a Look Around" and thought: someone's got to create a movie credits page using this, just for the fun of it.
I'm very surprised at how much more smooth this is in Internet Explorer (version 9) than in either Chrome, Opera or Firefox on my PC. IE doesn't actually scale the letters in the title though.
Found the effect: the three links (location, etc) trigger scrolling. Not really comparable to the scrolling transitions in the OP, but it doesn't have the problem of mystery meat.
Nobody asked me, but: I don't like any of these linked pages.
Overriding the way scroll works feels like a horrible thing to do, especially if it alters the nature of scroll (as those 'infinite scrolling' pages do), but even if it just results in extra animation that is still too much of a surprise. Scrolling should be a surprise-less action, just like clicking a link, IMO.
Yes, if you scroll using a 'pixel scroll' where it jumps down a few pixels per frame it looks great but if it jumps down 20+ pixels like with any normal scroll wheel, arrow keys, page up/down keys, or arrow buttons it just looks stupid.
I beg to differ; I'm on an Asus laptop running Windows 7 and they look great. For scrolling, I simply middle clicked and moved the cursor down slightly and everything was buttery smooth.
I forgot that still works on some computers. Honestly, I've never seen anyone else ever do that on a computer before. I don't even use it when I'm on my Windows laptop.
I feel like the popularity of this effect is to some extent a symptom of our society's constant information overload, and the attendant inability to slow down and focus, which then compels sites to compete for our attention with increasingly flashy presentations. Of course, to a much larger extent, it's probably due to cargo-cult website design.