Hacker News new | comments | show | ask | jobs | submit login
Show HN: Scrollorama (github.com)
395 points by johnpolacek 2000 days ago | hide | past | web | 51 comments | favorite



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”.)

[1]: http://benthebodyguard.com/index.php


I thought that was cool, then I recognised -- halfway down the page -- that the product being sold is not a game.


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.


I scroll with page down so this was really confusing at first.


that's really strange....I'm using chromium on Linux, and i see no performance penalty as you described...


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.


> When something new becomes possible everyone wants to find an excuse to try it.

For some reason that sentence reminded me of the 80s.


Yeah, but I get what the detractors are saying. Its like Uncle Ben said, "With great power, comes great responsibility."


I hate these things, maybe it's just me.

Reasons:

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?


You don't have to do things just for improving accessibility. Sometimes it's just about looking neat.


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.

This could be really cool on a portfolio site!


Excellent landing page. Epitomizes "show, don't tell"


Epitomizes "show, and tell".


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.


That surprised me as well. The first A in "SCROLLORAMA" goes over the scrollbar in Firefox 9.0.1 on Linux.


Could this be a security bug? Is there other ways scrip+css can take over the rendering, which I guess is done by XUL? Advanced click-jacking?


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.

http://johnpolacek.github.com/scrolldeck.js

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.


Using Ubuntu? If so, you ran into Ubuntus horrible scrolling config.


Do you have any recommendations for "fixing" it?

(I'm not sure what the desired behaviour is.)


It's "supposed" to be smooth scrolling. Only way to get that easily is to enable natural scrolling (like Lion). - http://www.omgubuntu.co.uk/2011/07/reverse-natural-scrolling...


Very cool, but I'd hesitate to use it on a production site - it's really jerky if the scroll isn't fluid, like on most PC's.


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.

Anyone else experiencing this?


Awesome plugin and landing page. Minor nitpicking: the "scrolldeck" link is broken.


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.


The rollout of the top H1 is downright painful (locked up the browser with 100%+ CPU usage on a C2D MBP 13") in Firefox 12.0a1.

Everything else works though.

It's all good in Chrome 16.0.912.63 on the above machine though.


Yeah, I pushed it a bit with that one for sure, but I just couldn't resist, haha


Just pushed an update that should help the performance a bit. (thanks eivindbekk/John Resig)


Just a heads-up/reminder: http://johnpolacek.github.com/scrolldeck is broken.


I love the http://www.groupme.com scrolling stuff. It was done tastefully and to great effect.


Here's another nice one: http://nizoapp.com

edit: also, hm, i seem to be missing any effect (if there is one) on the parent post's link


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.



Totally love it. I was searching for iOS address book style scrolling (fixed headings for a context). This would help.


Totally awesome. I'm constantly impressed at the holiday projects that were developed.


Doesnt work with scroll up/scroll down keys, which I always use.


The bursting lettering at the top was truly unexpected. Bravo.


no dice for mobile webkit.


paging looks broken


Sadly, these just don't look very good unless you're on a Mac and using a touchpad.


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.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact

Search: