HTML5 CoverFlow

HTML

<a href="" id="add">Add</a>
<a href="" id="remove">Remove</a>
<section><article>
        <p>
        test
        </p>
    </article><article>
    test
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article><article>
    
    </article></section>

CSS

body {
    background: gray;
}

section {
    width: 700px;
    height: 350px;
    overflow: auto;
    white-space: nowrap;
    -webkit-perspective: 1000px;
    -webkit-perspective-origin: 50% 65%;
}

article {
    background: rgba(0,0,0,0.8);
    display: inline-block;
    width: 200px;
    height: 286px;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.35);
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.5)));
    -webkit-transform: rotateY(0deg);
    -webkit-transition: all 500ms ease;
}

article.right {
    opacity: 0.5;
    -webkit-transform-style: flat;
    -webkit-transform: translateX(-75px) rotateY(-45deg);
}

article.left {
    opacity: 0.5;
    -webkit-transform-style: flat;
    -webkit-transform: translateX(75px) rotateY(45deg);
}

JavaScript

var containerWidth = $('section').width(),
    $articles = $('article'),
    widths = 0,
    $section = $('section');

widths = $articles.width() * $articles.length;

var checkBoundaries = function () {
    var scrollLeft = $section.scrollLeft(),
        containerWidthMax = containerWidth + scrollLeft;
    
    if (widths < containerWidth) {
        return;
    }
    var right = Math.floor(containerWidthMax / (widths/$articles.length)) - 1,
        left = scrollLeft === 0 ? 0 : Math.floor(scrollLeft / (widths/$articles.length) + 1);
    
    $articles.removeClass('right left');
    
    $articles.filter(':gt(' + right + ')').addClass('right');
    $articles.filter(':lt(' + left + ')').addClass('left');
    
}
    
checkBoundaries();
$('section').bind('scroll', function () {
    checkBoundaries();
});

$('#add').bind('click', function (e) {
    
    e.preventDefault();

    $('section').append('<article></article>');
    
    $articles = $('article');
    widths = $articles.width() * $articles.length;
    
    checkBoundaries();
    
});

$('#remove').bind('click', function (e) {

    e.preventDefault();
    
    $('article:last-child').remove();
    
    $articles = $('article');
    widths = $articles.width() * $articles.length;

    checkBoundaries();

});