League table

by António Almeida

HTML

<div class="btns"><button d="-1">«</button><button d="1">»</button></div>
<div class="table-cont"><div id="table">
    <div class="col"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p></div>
    <div class="col"><p>1</p><p>3</p><p>5</p><p>7</p><p>9</p><p>11</p><p>13</p><p>15</p></div>
    <div class="col"><p>1</p><p>5</p><p>9</p><p>13</p></div>
    <div class="col"><p>1</p><p>9</p></div>
    <div class="col"><p>1</p></div>
</div></div>

CSS

.btns {
    position: fixed;
    z-index: 1;
}
.table-cont {
    overflow: hidden;
    width: 752px;
    height: 1600px;
    margin-left: 12px;
    position: relative;
    background-color: #EEF;
}
#table {
    height: 1600px;
    width: 1600px;
    position: absolute;
    left: 0;
}
.col {
    float: left;
    width: 160px;
    height: 800px;
    /*background-color: #EEF;*/
    margin: 0 24px 0 0;
    position: relative;
}
.col > p {
    position: absolute;
    width: 160px;
    height: 80px;
    background-color: #66C;
    margin: 0 0 12px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    color: #FFF;
    text-align:center;
    line-height:80px;
    font-size: 18px;
    font-family: "Trebuchet MS";
}
.btns {
    margin: 5px 10px;
}

JavaScript

var size = 40,
    gap = 12,
    gapB = 48,
    gapD = (gapB - gap),
	round = 0;

function posit(curr, t) {
    $(".col").each(function(round) {
        var r = round + curr;
        $(this).find("p").each(function(elem) {
            var pos =
            	((Math.pow(2, r)-1) * (size + gap)) * 0.5 + elem * (Math.pow(2, r) * (size + gap));
            $(this).animate({marginTop: pos + "px"}, t ? t : 400);
        });
    });
    if(round < 0) $("html, body").animate({ scrollTop: 0 });
}



// Init
$(".col > p").wrap("span").css("height", size+"px").css("line-height", size+"px");
posit(0, 1);

// Buttons
$("button").on("click", function(){
    round += parseInt($(this).attr("d"));
    round = round > 0 ? 0 : (round < -3 ? -3 : round);
    $("#table").animate({left: round*184 + "px"}, 400);
    posit(round);
});