Rollodex

Javascript and CSS3 rollodex animation

by James Doyle

HTML

<div id="1" class="box" onclick="movetozero(this.id)"></div>
<div id="2" class="box" onclick="movetozero(this.id)"></div>
<div id="3" class="box" onclick="movetozero(this.id)"></div>
<div id="4" class="box" onclick="movetozero(this.id)"></div>
<div id="5" class="box" onclick="movetozero(this.id)"></div>

CSS

.box {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 70px;
    height: 70px;
    background: #333;
    -webkit-transform: scale(0.5,0.5);
    -webkit-transition: all 0.4s ease;
}

JavaScript

window.onload = function () { startme(); }
var box = document.getElementsByTagName("div");
var tvar = "35";
var newbg = Array("black","red","blue","green","purple");
var lvar = Array("0", "15","35","15","0");
var oldtop = Array();
var active = null;

function movetozero(thisid) {
    var oldleft = lvar[thisid - 1] + "px";
    var selected = document.getElementById(thisid);
    if (selected.style.left == "80px") {
        selected.style.left = oldleft;
        selected.style.top = oldtop[thisid -1];
        selected.style.width = "70px";
        selected.style.zIndex = 0;
        selected.style.WebkitTransform = "scale(0.5,0.5)";
        } else {
        selected.style.top = box[2].style.top;
        selected.style.left = "80px";
        selected.style.width = "200px";
        selected.style.zIndex = 10;
        selected.style.WebkitTransform = "scale(1,1)";
        }
}

function startme() {
    for (var i=0; i<box.length; i++) {
        box[i].style.left = lvar[i] + "px";
        box[i].style.top = tvar * i + "px";
        oldtop.push(box[i].style.top);
        box[i].style.background = newbg[i];
    }
}