zerogravity.js

$(document).ready(function() {
    var fps = 30;
    var fpsInterval = 1000 / fps;

    var tokens = $('.bricks').text().split(/\s/g)
    var out = $(".out")
    $.each(tokens, function(i, v) {
        var newNode = $('<span class="word"></span>').text(v);
        out.append(newNode);
    })
    var vectors = []
    var velocity = 2;
    $(".float-start").click(function() {
        $(".float-start").css("visibility", "hidden")
        $(".word").each(function(i, x) {
            //make a copy
            var pos = $(x).position()
            var copy = $('<span class="word"></span>').text($(x).text());
            copy.addClass(Math.random() > .5 ? "spinleft" : "spinright")
            copy.css("position", "absolute");
            copy.css("left", pos.left)
            copy.css("top", pos.top)
            copy.css("-webkit-animation-duration", Math.random() * 60 + 5 + "s")

            $(x).css("visibility", "hidden")
            console.log(x)
            out.append(copy)
            vectors.push({
                obj: $(copy),
                dx: (Math.random() * velocity) - (velocity / 2),
                dy: (Math.random() * velocity) - (velocity / 2)
            })
        })
        var lastTs = -1
        var updateObjs = function(ts) {
            if (lastTs < 0) {
                lastTs = ts;
                requestAnimationFrame(updateObjs)
                return
            }
            var elapsed = ts - lastTs;
            if (elapsed < fpsInterval) {
                requestAnimationFrame(updateObjs)
                return
            }

            lastTs = ts;
            for (var i = 0; i < vectors.length; i++) {
                var dd = vectors[i];
                var x, y;
                if (!("x" in dd)) {
                    var p = dd.obj.position()
                    x = p.left;
                    y = p.top;
                } else {
                    x = dd.x
                    y = dd.y
                }
                var newx = x + dd.dx
                var newy = y + dd.dy
                dd.obj.css({
                    "left": newx,
                    "top": newy
                })
                vectors[i].x = newx
                vectors[i].y = newy
            }
            requestAnimationFrame(updateObjs)
        }
        requestAnimationFrame(updateObjs)
    })
})