Home & blog  /  Scripts  /  view post  /

Bouncy text

Overview

Bouncy text is a jQuery plugin that animates text, bouncing each letter matched in the selector at random intervals. A pointless, if slightly fun method to make your page a little quirky.

Example

this text is bouncing!

Here's the code behind that example:

$(function() { $('#bounceTest span').bouncyText(); })

<h2 id='bounceTest'><span>this text</span> is bouncing!</h2>

^^ top of page

Usage & params

Via jQuery selector, target the element whose text you want to bounce, and run the bouncyText() method on it. Above, we're targeting the span inside the h1.

The method itself takes no parameters.

^^ top of page

Notes

Browser compatibility

The script works in all versions of IE, Firefox and Opera, but not currently in Chrome or Safari.

^^ top of page
post new comment

Comments (5)

samson, at 3/02/'11 11:57, said:
awesomeness!
Sascha, at 4/02/'11 08:17, said:
I like that!
Parag, at 4/02/'11 11:51, said:
Does not seem to work on my chrome but works just fine on Firefox
Mitya, at 4/02/'11 11:55, said:
Parag - I said in the 'browser compatability' notes (above) it doesn't currently work in Chrome :)
Bill, at 18/02/'11 17:32, said:
I guess Webkit is just different.