JRumble: A jQuery Plugin That Rumbles Elements | Hacker News Reader

JRumble: A jQuery Plugin That Rumbles Elements

jackrugile.com

102 pointssahillavingia32 comments

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.

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

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

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.

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.

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.

http://jarinudom.com/experiments/brainexploder

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

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.

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

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.

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

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

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.

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

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.

The new <blink>?

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.

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!

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

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

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

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

This will be useful for April fools next year.

Is this the new <blink>? :)

Worst.Effect.Ever /comicbook guy

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.

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.

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.

> There's a difference between the potential to do annoying things, and actually _implementing_ annoying things.

That's exactly my point.

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

Similarly, there are annoying ways to use jRumble (or jQuery.slideDown()), which shouldn't preclude it being mostly used in a good way.

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.

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!

Reply on news.ycombinator.com