Deep Impact Header picture
Home » Tutorials » Hipster Robot Animation

Hipster Robot Animation

replay restart

var blockArray,
    i,
    item,
    restart;

blockArray = [
    ['block41', 18], ['block51', 18],
    ['block31', 40], ['block42', 40], ['block52', 40], ['block61', 40],
    ['block21', 62], ['block32', 62], ['block43', 62], ['block53', 62], ['block62', 62], ['block71', 62], ['block81', 62],
    ['block11', 73],
    ['block22', 84], ['block33', 84], ['block44', 84], ['block54', 84], ['block63', 84], ['block72', 84], ['block82', 84],
    ['block23', 106], ['block34', 106], ['block45', 106], ['block55', 106], ['block64', 106], ['block73', 106], ['block83', 106],
    ['block24', 128], ['block35', 128], ['block46', 128], ['block56', 128], ['block65', 128], ['block74', 128], ['block84', 128],
    ['block25', 150], ['block36', 150], ['block47', 150], ['block57', 150], ['block66', 150], ['block75', 150], ['block85', 150],
    ['block12', 161],
    ['block26', 172], ['block37', 172], ['block48', 172], ['block58', 172], ['block67', 172], ['block76', 172], ['block86', 172],
    ['block38', 194], ['block49', 194], ['block59', 194], ['block68', 194],
    ['block410', 216], ['block510', 216]
];

function move(x) {
    "use strict";
    item = document.getElementById(blockArray[x][0]);
    item.style.left = blockArray[x][1] + "px";
}

function moveBlocksSeparately() {
    "use strict";
    for (i = 0; i < blockArray.length; i += 1) {
        setTimeout(function (x) {
            return function () {
                move(x);
            };
        }(i), 200 * i);
    }
}
function restarting() {
    "use strict";
    for (i = 0; i < blockArray.length; i += 1) {
        document.getElementById(blockArray[i][0]).style.left = "300px";
    }
    setTimeout(moveBlocksSeparately, 1000);
}

function main() {
    "use strict";
    restart = document.getElementById("restart");
    restart.addEventListener("click", restarting, false);
    moveBlocksSeparately();
}
window.addEventListener("load", main, false);