Now, as many of you know, I'm a big fan of taking interactions from retro gaming and attempting to squish them onto the page as standard UI elements. If I had my way, all sites would look like BMX Simulator from the C64. With that in mind... today something great happened. A win for old-school-gaming-as-ui-elements unmatched since CSS sprites were invented: Jeremy Keith's 1UP notifications! Don't simply let your user know they've "added a friend", let them feel like they "added a friend" AND scored 1000 points! 1UP notifications just have to storm the web with their awesomeness, and we need to do our best to help them.
Of course, you won't have "1000" popping up... you'll have "added" or "removed" or "dugggg" or something a bit useful to the end user. I don't care about end users, so I'll have "1000".
In the spirit of trying to get the effect to take over the web, I thought I'd throw together a jQuery plugin for sticking them on your site. The jquery.oneup.js plugin is very straightforward - it just animates an element upwards while fading out: 1UP style! To use it, just make your typical notification element position:relative, or position:absolute - whatever it takes to make it movable! (I'll fix this in the next version). For the demo, I've styled my notification message like so:
...
<input type="submit" id="go" value="go" />
<span id="loadn">load</span>
...
#loadn{
position:relative;
left:-30px;
top:-4px;
display:none;
}The element then sits "invisibled" over the "go" button, ready to fly... Next we wire up our 1UP functionality with the plugin:
$("#go").click(function(){
$("#loadn").oneUp();
});
YES! That is so cool: check it in action. The plugin accepts parameters speed (as a jQuery time - like, 'slow', 'fast' or 1000) and distance (how many pixels it travels upwards). You can also specify a callback if you need to do something after the notification completes (like in the demo).
Well, I'm pretty stoked with this turn of events. I've got to go back through every single site I've ever done and add way-too-many of these lil' fellows in. The jquery.oneup.js plugin needs a bit of work: so it handles positioning all by itself, and so forth... I'll let you know as soon as that's done. But in the mean time, I've got a highscore to go beat...
10 Comments
Cool nerditry champ.
Doesn’t do much on Chrome for Mac (4.0.237.0) but I suppose I should expect that.
Ah ha… ’cause it was actually posting back, and Chrome was fast enough to kill the effect!
Chrome on Mac hey? Are you Mac-ed up now?!
Could we get a demo?
Maybe you’ve linked to a demo… your links are hard to spot *grumble*
Lucky you’re not behind a payed content wall or I’d be a furious paying customer!!!!!
Yeah there is a “demo”, and yeah it is hard to spot. Maybe a bit tooo easy at the moment… I’ll fix that on the weekend. I made “link-free” demo just for those who like spoilers..
But don’t worry – I would never put stuff behind a paid content wall, have advertisements, or have paying customers ’cause that makes the internet a stinky crappy place.
As I’ve told you, this is beautiful. In fact I implemented it on the weekend for something. And discovered a bug :)
Which is why it should be on the ‘hubs, dude!
I’ll write that post about that, but meanwhile, your callback doesn’t work. Your settings.callback is entirely in the wrong place :)
Should look more like this:
http://gist.github.com/243421
Major awesomeage… I’m sure I’ll be able to find somewhere to impliment that. Cheers!
try pressing the button multiple time and see the “1000” go up continously up to the top :D
That’s a pretty fun game you discovered, almostdead!
Thanks Mr Speaker.
I implemented this in a site yesterday afternoon.
Implementation was easy.
Worked perfectly in every browser I tested, first time.
The effect is very useful and nice visually.
Nice work.
Cheers
Excellent plugin! Thank you, man! I was looking for it soooo long! Great work!