Gift Card Stack

jQuery navigating a stack of gift cards.

by Preston Badeer

HTML

<ul>
    <li data-title="title" class="f">
        <img src="http://techblog.dallasnews.com/giftcard.jpg" />
    </li>
    <li data-title="title 2">
        <img src="http://techblog.dallasnews.com/giftcard.jpg" />
    </li>
    <li data-title="title 3">
        <img src="http://techblog.dallasnews.com/giftcard.jpg" />
    </li>
    <li data-title="title 4">
        <img src="http://techblog.dallasnews.com/giftcard.jpg" />
    </li>
    <li data-title="title 5" class="l">
        <img src="http://techblog.dallasnews.com/giftcard.jpg" />
    </li>
</ul>

CSS

ul {
    overflow: hidden;
}
li {
    width: 300px;
    position: relative;
    height: 190px;
    margin-top: -161px;
    bottom: -800px;
}
li.f {
    margin-top:auto;
}
img {
    width: 300px;
}
li:before {
    padding: 3px 0;
    border-top: 1px solid black;
    content: attr(data-title);
    color: white;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:1.2em;
}
li.l:before, li.s:before {
    display: none;
}

JavaScript

var t = 500,
    mt = '-161px';

$('li').each(function (index) {
    t = t + 400;

    $(this).animate({
        'bottom': '0'
    }, t);
});

$('li').click(function () {
    if (!$(this).hasClass('s')) {
        $('li').removeClass('s');

        $('li:not(.f)').animate({
            'marginTop': mt
        }, 200);

        $(this).addClass('s').next('li').animate({
            'marginTop': '0'
        }, 300);
    } else {
        $(this).removeClass('s').next('li').animate({
            'marginTop': mt
        }, 300);
    }
});