Grid Slideshow

A starting concept for a responsive slideshow with a grid animation

by kthornbloom

HTML

<div class="gridslide">
    <img src="http://scaredrabbit.net/symphony/1.jpg" alt="plane">
    <img src="http://scaredrabbit.net/symphony/2.jpg" alt="jellyfish">
    <img src="http://scaredrabbit.net/symphony/3.jpg" alt="dock">
</div>

CSS

.gridaspect {
    position:relative;
    overflow:hidden;
}
.gridslide {
    height:100%;
    width:100%;
    position:absolute;
}
.gridwrap {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    -webkit-perspective:800;
}
.gridwrap div {
    width:33.3%;
    height:100%;
    float:left;
    background-size:cover!important;
    background-repeat:none!important;
    transition:all .8s ease-out;
    -webkit-backface-visibility: hidden;
   	backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-origin:center;
}
.gridwrap div:nth-child(2) {
    background-position:center!important;
}
.gridwrap div:nth-child(3) {
    background-position:right!important;
}

JavaScript

var imgWidth = $('.gridslide img:first').width(),
    imgHeight = $('.gridslide img:first').height(),
    aspect = (imgHeight / imgWidth) * 100,
    slideTime = 3000,
    autoPlay = "true",
    grids = 3;

// Correct Order
$('.gridslide img').each(function () {
    $(this).prependTo('.gridslide');
});

// Set aspect ratio
$('.gridslide').wrap('<div class="gridaspect"></div>');
$('.gridaspect').css('paddingBottom', aspect + '%');

// Split images into grids
$('.gridslide img').each(function () {
    var photoUrl = $(this).attr('src');
    $('<div class="gridwrap gridcurrent"></div>').insertAfter(this);
    for (var i = 0; i < grids; i++) {
        $('.gridcurrent').append('<div style="background:url(' + photoUrl + ')"></div>');
    }
    $('.gridcurrent').removeClass('gridcurrent');
    $(this).remove();
});

slideVertical = function () {
    $('.gridwrap:nth-last-child(2) div').each(function (i, el) {
        setTimeout(function () {
            $(el).css({
                'transform': 'rotateX(90deg) translateY(0%)'
            });
        }, 500 + (i * 200));
    });
    $('.gridwrap:last').prependTo('.gridslide').find('div').css({
        'transform': 'rotateX(0deg) translateY(0%)'
    });;
}

// Autoplay Function
var autoPlay = function () {
    var effect = 'slideVertical';
    effectArray = effect.split(',');
    var effect = effectArray[Math.floor(Math.random() * effectArray.length)];
    this[effect]();
}

autoPlay();
var playInterval = setInterval(autoPlay, slideTime);