JRumble: A jQuery Plugin That Rumbles Elements

by sahillavingia • 15 years ago

102 32 15 years ago

noahlt• 15 years ago

It's neat that he was able to make this effect, and I'm glad we're experimenting with new Javascript+CSS3 effects.

This particular effect, though, reminds me of turbulence in an airplane, or the rumble of a subway. When I see the rumbling elements on the page, it makes me nervous and anxious.

donpdonp• 15 years ago

Very interesting effect! I can see using this to attract attention to an inbox indicator that got a new email, or something similar.

aberkowitz• 15 years ago

The new <blink>?

morisy• 15 years ago

Such a fun little effect, but probably such a bad design decision 99% of the times I'd be tempted to use it. Great looking documentation page, too.

fletchowns• 15 years ago

Similar effect is used on iOS devices when you are in the "rearrange icons" mode.

emehrkay• 15 years ago

Very cool. I was surprised at how much little code is needed to make this work. After reading through the source, it seems like no js lib is "needed" for this effect to work at all. The rumble.js file might be a tad bit longer, but no need for an external dependency.

Cool work! It's amazing just how creative people are.

tomlin• 15 years ago

There needs to be a Bookmarklet for this, whereby I could click it and every div on the currently viewed site would rumble until the browser crashed.

EDIT: http://dl.dropbox.com/u/4912110/jrumble-it.html

blackrobot• 15 years ago

eh, i just made it so it rumbles all divs:

  javascript:var i,s,ss=['http://dl.dropbox.com/u/1578229/jrumble.1.1.min.js,http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);bookmarklet

wildmXranat• 15 years ago

Well, I expected to see what I actually saw. A++

cwilson• 15 years ago

This will be useful for April fools next year.

jarin3• 15 years ago

I'm going to see if this works with the CSS3 animated glowing form (http://news.ycombinator.com/item?id=2399927). If you don't hear back from me, it's because my brain exploded.

jarin3• 15 years ago

http://jarinudom.com/experiments/brainexploder

kaylarose• 15 years ago

Thank you for making Glowform even more EXTREME!!!!

schwabacher• 15 years ago

I think it would be very cool to add a 'decay' option, where the ranges decrease over time until the effect stops. I might have to fool around with this myself.

splatcollision• 15 years ago

This is hilarious. I wrote a button hover algorithm just like this years ago in Lingo for a shopping CD-ROM. What comes around, goes around...

OzzyB• 15 years ago

Is this the new <blink>? :)

Hominem• 15 years ago

I remever rumble effects like this being very popular in flash interfaces for a good long time. Now all we need is an on hover ramping tansition to a hilight color and transition back and we are set to repeat 1998!

swivelmaster• 15 years ago

My first thought reading the headline was, is this to make sure my web site is earthquake safe?

edit: If nobody downvotes this I will consider it a successful comment!

originalgeek• 15 years ago

Worst.Effect.Ever /comicbook guy

tomkarlo2• 15 years ago

Given that the developer was about 7 years old when the BLINK tag was inflicted on the world, I'm going to forgive him for this. But really, this is a lot of HTML/JS/CSS evolution just to get back to what is effectively BLINK.

dandelany2• 15 years ago

What about all of the UI animations built into jQuery and other frameworks these days? Sliding, pulsing, hopping, etc. all provide essentially the same purpose, to guide your attention to a particular element as it changes. I don't see anyone clamoring about those being the second coming of the evil BLINK tag.

The problem with the BLINK tag was the fact that anything wrapped in it would blink continuously, for as long as the page was loaded. I don't think anyone is suggesting that this plugin should be used to continuously rumble anything on the page, any more than anyone thinks jQuery.slideToggle() should be called in an infinite loop to slide something up and down continuously.

It's a design element that should be used sparingly and for a limited time to grab the user's attention in an interesting way. Nothing more.

tomkarlo2• 15 years ago

There's a difference between the potential to do annoying things, and actually _implementing_ annoying things. I'm sure there were non-annoying ways to use BLINK, too, but that doesn't meant that it wasn't mostly used in a bad way.

apike• 15 years ago

In the game Heavy Rain, buttons for actions that have serious consequences will rumble slightly. In very strained or tense scenes, they rumble a lot. An analog on the web might be the hover style for a button that deletes things with no undo.

nickconfer• 15 years ago

great another annoying thing to look forward to in the future of web ads.

dools• 15 years ago

I'm not sure why there is so much negative sentiment about this effect. Rumble can be used pretty nicely for a range of things, for example if you attempt to click on something which should not allow focus, or if you add an item to a new item to a page which would otherwise look too similar to the rest of the page and you want to draw attention to it ... there are loads of valid uses for this.

jarin3• 15 years ago

It would be pretty great for replicating OS X's "shaking no" effect when you type your password in wrong on the login screen (it needs a falloff setting though).

kellishaver• 15 years ago

I noticed recently that the Wordpress login page now does this.

Wolf_Larsen• 15 years ago

Wufoo uses this effect on the add-field options when you click "add field", if the add-field options are already open.

It directed me to what I wanted immediately.

Groxx• 15 years ago

Only downside here is that the slower rumbling just makes it look jerky and cheap - it appears to have the same animation, just with large gaps between the frames, instead of adding a little bit of easing.

edit: Now I realize what vibe it was giving me... the 200-speed one makes me feel like I'm watching South Park.

josh33• 15 years ago

This is actually a great way to teach someone about mouse states.

mwill• 15 years ago

Before I got to the end of the title, a little part of me hoped it was a jQuery plugin that operated rumble motors and force feedback in game pads and the like. Not that it would be useful on any widespread scale.

The rumble effect presented on the other hand seems like it will be useful to alert users to errors or interactive elements. I can think of some cool interface sugar to implement with it.

JRumble: A jQuery Plugin That Rumbles Elements

Related Stories