6 ms·
Show HN: Scrollorama
- shdon 15y agoI'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.
- johns 15y agoExcellent landing page. Epitomizes "show, don't tell"
- jmilloy 15y agoEpitomizes "show, and tell".
- ot 15y agoAwesome plugin and landing page. Minor nitpicking: the "scrolldeck" link is broken.
- mmastrac 15y agoVery 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.
- jrgifford 15y agoUsing Ubuntu? If so, you ran into Ubuntus horrible scrolling config.
- damncabbage 15y agoDo you have any recommendations for "fixing" it? (I'm not sure what the desired behaviour is.)
- jrgifford 15y agoIt'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-ubuntu-os-lion/ http://www.omgubuntu.co.uk/2011/07/reverse-natural-scrolling...
- derekerdmann 15y agoVery 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.
- spicyj 15y agoJust a heads-up/reminder: http://johnpolacek.github.com/scrolldeck http://johnpolacek.github.com/scrolldeck is broken.
- tsunamifury 15y agoUnfortunately 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.
- notJim 15y agoCool 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.
- johnpolacek 15y agoWell 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.
- notJim 15y agoI 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 http://benthebodyguard.com/index.php
- morsch 15y agoI thought that was cool, then I recognised -- halfway down the page -- that the product being sold is not a game.
- notJim 15y agoYeah, 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.
- johnpolacek 15y agoFixed 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 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!
- ceol 15y agoAwesome 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!
- sn_ 15y agoDoesnt work with scroll up/scroll down keys, which I always use.
- earle 15y agopaging looks broken
- drivebyacct2 15y agoSadly, these just don't look very good unless you're on a Mac and using a touchpad.
- ElliotMingee 15y agoI 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.
- drivebyacct2 15y agoI 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.
- TheMiddleMan 15y agoYes, 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.
- Trezoid 15y agoThe 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.
- johnpolacek 15y agoYeah, I pushed it a bit with that one for sure, but I just couldn't resist, haha
- johnpolacek 15y agoJust pushed an update that should help the performance a bit. (thanks eivindbekk/John Resig)
- deleted 15y ago[deleted]
- richardburton 15y agoI love the http://www.groupme.com http://www.groupme.com scrolling stuff. It was done tastefully and to great effect.
- dylanpyle 15y agoHere's another nice one: http://nizoapp.com http://nizoapp.com edit: also, hm, i seem to be missing any effect (if there is one) on the parent post's link
- johnpolacek 15y agoHow about this one? http://gidsy.com/handbooks/making-the-perfect-listing/ http://gidsy.com/handbooks/making-the-perfect-listing/
- georgemcbay 15y agoNobody 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.
- obtu 15y agoFound 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.
- pm90 15y agohttp://eee.asus.com/eeepad/transformer-prime/features/ http://eee.asus.com/eeepad/transformer-prime/features/
- DrCatbox 15y agoIs 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.
- buro9 15y agoI 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?
- AndrewDucker 15y agoI 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.
- RandallBrown 15y agoYou don't have to do things just for improving accessibility. Sometimes it's just about looking neat.
- alagu 15y agoTotally love it. I was searching for iOS address book style scrolling (fixed headings for a context). This would help.
- aridiculous 15y agoThe bursting lettering at the top was truly unexpected. Bravo.
- mikeleeorg 15y agoTotally 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.
- lowglow 15y agoTotally awesome. I'm constantly impressed at the holiday projects that were developed.
- lvillani 15y agoThis 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?
- ricardobeat 15y agono dice for mobile webkit.