Adding “1UP notification” with jQuery

mario scoreNow, 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.

Get some points:GO!1000

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