RVB vibrations

README

RVB vibrations effect for text

jsdoit.css

body { background-color: #fff; font-family:arial; font-size:50px;}
#box{position:relative; margin:80px 0 0 80px;}
#box p{position:absolute; top:0; left:0px; opacity:.333; cursor:crosshair; letter-spacing:1px; text-transform:uppercase; font-weight:bold;}
.main{opacity:1;}
.R{color:#FF0000;}
.V{color:#00FF00;}
.B{color:#0000FF;}

jsdoit.html

<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/terminal-grotesque" rel="stylesheet" type="text/css"/> 
<div id="box">
<p class="main">Over Me</p>
</div>

jsdoit.js

$(".main").clone().removeClass('main').addClass('B').prependTo("#box");
$(".main").clone().removeClass('main').addClass('R').prependTo("#box");
$(".main").clone().removeClass('main').addClass('V').prependTo("#box");
$(".main").hide();

jQuery.fn.vibrate = function (conf) {
    var config = jQuery.extend({
        speed:        30,
        duration:    1000,  
        spread:        5
    }, conf);
    return this.each(function () {
        var t = jQuery(this);
        var vibrate = function () {
            var topPos    = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);
            var leftPos    = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);
            var rotate    = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);
            t.css({
                left:                leftPos + 'px',
                top:                topPos + 'px',
                WebkitTransform:    'rotate(' + rotate + 'deg)'  // cheers to [email protected] for the rotation-idea
            });
        };
        var doVibration = function () {
            var vibrationInterval = setInterval(vibrate, config.speed);
            var stopVibration = function () {
                clearInterval(vibrationInterval);
                t.css({
                    left:            '0',
                    top:			'0',
                    WebkitTransform:    'rotate(0deg)'
                });
            };
            setTimeout(stopVibration, config.duration);
        };
        doVibration();
    });
};
$('#box').hover(function() {$('#box p').vibrate();});