Showreel prototype

by Greg Bowler

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<div class="main">
    <div class="container position1">ONE</div>
    <div class="container position2">TWO</div>
    <div class="container position3">THREE</div>
    <div class="container position4">FOUR</div>
    <div class="container position5">FIVE</div>
</div>

CSS

div.main {
    position: absolute;
    left: 50%;
    overflow: visible;
}
div.container {
    position: absolute;
    width: 160px;
    height: 100px;
    background: #666;
    border: 2px solid #000;
    text-align: center;
    line-height: 64px;
    color: #fff;
    cursor: pointer;
}
div.container:hover {
    background:#777;
}
div.position1 {
    left: -350px;
}
div.position3 {
    left: 190px;
}
div.position2 {
    left: -160px;
    width: 320px;
    height: 160px;
    font-size: 48px;
    line-height: 128px;
}
div.position4,
div.position5 {
    display: none;
}

div.left {
    left: -440px;
    width: 64px;
    height: 40px;
    opacity: 0;
    font-size: 1px;
    line-height: 0;
}
div.right {
    left: 380px;
    width: 64px;
    height: 40px;
    opacity: 0;
    font-size: 1px;
    line-height: 0;
}

button {
    margin-top: 200px;
}

JavaScript

$("div.container").click(function() {
    var main = $("div.main");
    if(main.hasClass("lock")) {
        return;
    }
    
    main.addClass("lock");
    setTimeout(function() { $("div.main").removeClass("lock"); }, 500);
    
    if($(this).hasClass("position1") ) {
        move(-1);
    }
    else {
        move(+1);
    }
});

var move = function(dir) {
    var pos1 = $("div.position1");
    var pos2 = $("div.position2");
    var pos3 = $("div.position3");
    var pos4 = $("div.position4");
    var pos5 = $("div.position5");
    
    if(dir === +1) {
        pos1.switchClass("position1", "left", 500, function() {
            pos1.removeClass("left");
            pos1.addClass("position5");
        });
        pos2.switchClass("position2", "position1", 500);
        pos3.switchClass("position3", "position2", 500);
        
        pos4.removeClass("position4");
        pos4.addClass("right");
        pos4.switchClass("right", "position3", 500);
        
        pos5.removeClass("position5");
        pos5.addClass("position4");
    }
    else {
        pos1.switchClass("position1", "position2", 500);
        pos2.switchClass("position2", "position3", 500);
        pos3.switchClass("position3", "right", 500, function() {
            pos3.removeClass("right");
            pos3.addClass("position4");
        });
        pos5.removeClass("position5");
        pos5.addClass("left");
        pos5.switchClass("left", "position1", 500);
        
        pos4.removeClass("position4");
        pos4.addClass("position5");
    }
};