bumpyText - make text dance!
Releases
| File / Release | Date Modified | Size | License | Link |
|---|---|---|---|---|
| bumpyText 1.1 | 04/05/2010 | 2.09 kB | MIT | Download |
| bumpyText 1.1 (packed) | 04/05/2010 | 1.39 kB | MIT | Download |
Resources
Just for fun, I've created a plugin that lets you make text 'bounce'. It's completely pointless (prove me wrong!) but was just a fun morning most of Sunday project. The plugin is called bumpyText and using it is as simple as the examples below (example 1 and example 2).
Example 1
$(document).ready(function() {
$('p.make-me-bumpy').bumpyText();
});Example 2
span.bumpy-char {
position: relative;
line-height: 3.4em; /* Required for IE8. Without this, the text can disappear as it rises. Experiment until you find a large enough number. */
}As you can see, there is one simple CSS rule needed for this affect. Each non whitespace character is wrapped inside a span like so <span class="bumpy-text">a</span>
You can modify the effect by passing in these values, as seen in example 3.
Example 3
$(document).ready(function() {
$('p.make-me-bumpy').bumpyText( {
bounceHeight: '1.3em',
bounceUpDuration: 500,
bounceDownDuration: 700 // Note this should quicker than the bounce up duration, to emulate gravity.
} );
});This plugin does have a dependency. The intended bump does not look very good without the jQuery Easing Plugin. Just download and include this plugin somewhere before you call bumpyText().
When using this plugin, I'd recommend using the plugin hoverIntent which IMO is a much better way of performing any mousover function then what jQuery provides by default. If you do use hoverIntent, be sure to change the existing mouseover() method to hoverIntent. Please see the hoverIntent docs for more info.
It is also worth mentioning that the plugin will only affect a html element who's node is just text. If you try and do a paragraph (p) element with an anchor (a) element nested inside, the plugin will not work. I am thinking of changing this to use a regex, to apply this to text without affecting HTML tags, if I do it will be coming in a future release.
Tested in
- Firefox 3.5
- Safari 3.1
- Internet Explorer 6/7
- Google Chrome
Comments
No comments yet.
Leave a Comment
Note: Your comment may require approval before it is posted to the site.