SOTB Transitions demo

by stopsatgreen

HTML

<div class="screen-holder dynamic">
    <img width="300" height="150" class="screen-1" src="http://broken-links.com/tests/images/kitten-1.jpg">
    <img width="300" height="150" class="screen-2" src="http://broken-links.com/tests/images/kitten-2.jpg">
</div>

CSS

.screen-holder {
    height: 150px;
    margin: 20px;
    position: relative;
    width: 300px;
}

.screen-holder img {
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
}

.screen-holder .screen-1 {
    -moz-transition: all 100ms ease-in-out 0s;
    transition: all 100ms ease-in-out;
z-index: 8;
}

.screen-holder .screen-2 {
    -moz-transform: scale(0.96) translateY(-3.6%);
transform: scale(0.96) translateY(-3.6%);

    -moz-transition: all 500ms ease-in-out 0s;
transition: all 500ms ease-in-out;
    z-index: 7;
}

.screen-holder .screen-2.stage-1 {
    -moz-transform: translateY(-10%);
        transform: translateY(-10%);
}

JavaScript

$(document).ready(function(){
    var imgSrc = 'http://broken-links.com/tests/images/';
    var triggerTemplate  = '<ol id="trigger"><li data-screen="kitten-1" class="active">1</li><li data-screen="kitten-2">2</li><li data-screen="kitten-3">3</li><li data-screen="kitten-4">4</li></ol>';
    function swapStage1(e) {
    console.log('Stage 1');
    var screen2img = $(e.currentTarget).data('screen');
 $(e.currentTarget).addClass('active').siblings().removeClass('active');
    $('.screen-holder img.screen-2').attr('src',imgSrc + screen2img + '.jpg').addClass('stage-1');
}
function swapStage2(e) {
    console.log('Stage 2');
    $('.screen-holder img').removeClass('stage-1').addClass('stage-2');
}
function swapStage3(e) {
    console.log('Stage 3');
    $('.screen-holder img.screen-1').attr('class','screen-2');
    $('.screen-holder img.screen-2').attr('class','screen-1');
    endSwap();
}
function endSwap() {
    var screen2 = $('.screen-holder img.screen-2');
    screen2.detach();
    $('.screen-holder img.screen-1').after(screen2);
}
$('.screen-holder').after(triggerTemplate);
$('#trigger li:not(.active)').on('click',swapStage1);
$('.screen-holder').on('transitionend oTransitionEnd webkitTransitionEnd','img.screen-2.stage-1', swapStage2);
$('.screen-holder').on('transitionend oTransitionEnd webkitTransitionEnd','img.screen-2.stage-2',swapStage3);
});