Question

I’m looking for a jQuery plugin that wobbles DOM elements like on http://www.iconatlas.com/

I checked their source and they use jQuery but it doesn’t look like they’re using a plugin to do that. Anyone know of a plugin that does something similar?

Answer 1

I don’t know any plugin about that, but you can create one if you want.

Well, the site use this(below) jQuery code for that.

$(function(){
    var start_time = new Date().getTime();
    var wobble_sec = 4;
    var icons = $("#featured img");
    var bobble = setInterval(function (){
        var sec = ((new Date().getTime()) - start_time)*0.001;
        var alpha = sec*2*Math.PI;

        var wobble_alpha = alpha/wobble_sec;
        var lambda = (0.5 + Math.cos(Math.min(Math.PI,wobble_alpha))*0.5)*50;

        for (var i=0;i<icons.length;++i){

            var y = Math.round(lambda*(Math.cos(alpha*1.2 + i)*0.5) + 30);
            icons.eq(i).css("top",y+"px");
        }

        if (wobble_alpha > Math.PI){
            clearTimeout(bobble);

        }
    },30);
});

go play with the demo.
​