JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<ul class="slider">
    <li>
        <img src="http://www.utepprintstore.com/wp-content/uploads/Best-computer-background-12-1024x768.jpg" alt="" />
    </li>
    <li>
        <img src="http://boncia.co/wp-content/uploads/2013/12/hd-wallpaper-nature-40.jpg" alt="" />
    </li>
</ul>

CSS

.slider {
    margin:0;
    padding:0;
    position:relative;
}
.slider li {
    list-style:none;
    position:absolute;
    width:100%;
    height:300px;
    overflow:hidden;
}
.slider li .__blast {
    position:absolute;
}
.slider li .__blast.animate {
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(270deg) rotateZ(0deg) scale3d(0.5, 0.5, 0.5);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(270deg) rotateZ(0deg) scale3d(0.5, 0.5, 0.5);
-o-transform: perspective(500px) rotateX(0deg) rotateY(270deg) rotateZ(0deg) scale3d(0.5, 0.5, 0.5);
-ms-transform: perspective(500px) rotateX(0deg) rotateY(270deg) rotateZ(0deg) scale3d(0.5, 0.5, 0.5);
transform: perspective(500px) rotateX(0deg) rotateY(270deg) rotateZ(0deg) scale3d(0.5, 0.5, 0.5);
    transition:all 2s ease;
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    opacity:0;
    
}

JavaScript

(function ($, window, undefined) {
    $.fn.blast = function () {
        var CONST = {
            blast: '__blast',
            xCount: 16,
            yCount: 4
        };
        $(this).each(function (index, el) {
            var slider = {};
            var li = $(el).find('li');
            slider.width = li.eq(0).width();
            slider.height = li.eq(0).height();
            slider.x = slider.width / CONST.xCount;
            slider.y = slider.height / CONST.yCount;

            li.each(function (ind, elm) {
                var imgSrc = $(elm).find('img').hide().attr('src');
                for (var i = 0; i < CONST.xCount; i++) {
                    for (var j = 0; j < CONST.yCount; j++) {
                        var position = {
                            left: (i * slider.x) + 'px',
                            top: (j * slider.y) + 'px',
                        }
                        var div = $('<div/>').addClass(CONST.blast).css(position);
                        div.width(slider.x).height(slider.y);
                        div.css('background', 'url(' + imgSrc + ') no-repeat -' + position.left + ' -' + position.top);
                        div.appendTo(elm);
                    }
                }
            });
        });
        return this;
    };
})(jQuery, window);

$('.slider').blast();
setTimeout(function () {
    $('.slider li:last-child div').each(function (i, elm) {
        setTimeout(function () {
            $(elm).addClass('animate');
        }, Math.random()*500);
    });
}, 5000);