Deck reveal animation

http://stackoverflow.com/questions/17453562

by corymcd

HTML

<div id="col1"></div>
<div id="col2"></div>

CSS

body {
    margin: 0;
    padding: 0;
}

#col1, #col2 {
    width: 50%;
    height: 500px;
    display: block;
    float:left;
    position: relative;
}

#col1 {
    z-index: 10;
}

.colItem {
    background: #55ff55;
    width: 90%;
    height: 50px;
    display: block;
    margin: 10px 5%;
    z-index: 10;
}

.absColItem {
    position: absolute;
    width: 90%;
    height: 25px;
    background: #5f5f5f;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(15%,rgba(30,87,153,0.8)), color-stop(19%,rgba(30,87,153,1)), color-stop(20%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(80%,rgba(30,87,153,1)), color-stop(81%,rgba(30,87,153,1)), color-stop(85%,rgba(30,87,153,0.8)), color-stop(100%,rgba(30,87,153,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); /* Chrome10+,Safari5.1+ */
    z-index: 5;
}

JavaScript

var $col1 = $('#col1'),
    $col2 = $('#col2'),
    numItems = 10;

for (var i = 0; i < 8; i++) {
    $col1.append($('<div>').addClass('colItem'));
}

$col1.find('.colItem').on('click', function(e) {
    
    $newItem = $('<div>').addClass('absColItem');
    $newItem.css({'top': $(this).position().top + 22, 'left': 10});
    $col2.append($newItem); 
    var itemHeight = $newItem.height();
    $newItem.remove();
    
    var numItemsAboveSpace = Math.floor(($(e.currentTarget).position().top + 22 + itemHeight) / (itemHeight + 10));
    var numItemsBelowSpace = Math.floor(($col2.height() - ($(e.currentTarget).position().top + 22 + itemHeight + 10)) / (itemHeight + 10));
       
    var arrDivs = [];
    
    for(var i = 0; i <numItems; i++) {
        arrDivs[arrDivs.length] = '<div class="absColItem">' + i + '</div>';  
    }

    var $col2Items = $col2.html(arrDivs.join("")).find('div.absColItem');
    
    $col2Items.data('parent', e.currentTarget)
        .css({
            'top': $(e.currentTarget).position().top + 22,
            'left': '-100px'
        });

    // Figure out which element to center on.
    var numMaxDuration = 700;
    var numCol2Items = $col2Items.length;
    var numCol2ItemsHalf = Math.ceil(numCol2Items/2);
    var numItemsBelow = Math.min(numCol2ItemsHalf,numItemsBelowSpace);
    var numItemsAbove = Math.min(numCol2Items-numItemsBelow,numItemsAboveSpace);
    numItemsBelow = Math.max(numCol2Items-numItemsAbove,numItemsBelow);  
    
    var numMaxMoved = Math.max(numItemsBelow,numItemsAbove-1);
    $col2Items.each( function(index) {
            var numCenterOffset = (index+1-numItemsAbove);
            var numDuration = Math.floor(((Math.abs(numCenterOffset)/numMaxMoved)) * numMaxDuration);
        $(this).animate({'left': 0},100)
        .animate({
                'top': ($(this).position().top + (numCenterOffset * (itemHeight+10)))
            }, numDuration, 'linear').append('&nbsp;&nbsp;&nbsp;Animation Duration: ' + numDuration);
     ...