JSFiddle - React, Tailwind, and code Playground

by Mohamed Mulla

HTML

<button>Toggle</button>
<div class="sliced">
  <img src="http://i50.tinypic.com/210dieu.jpg"/>
</div>

CSS

body { margin: 20px; }

.sliced {
    position: relative;
    width: 640px; 
    height: 400px;
}
.tile { 
    float: left;
    opacity: 1;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
.tile-animated {
    opacity: 0;
}
.css3-preload .sliced * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

JavaScript

;(function( $, window ) {

  var _defaults = {
    x      : 2, // number of tiles in x axis
    y      : 2, // number of tiles in y axis
    random : true, // animate tiles in random order
    speed  : 2000 // time to clear all times
  };

  /**
  * range Get an array of numbers within a range
  * @param min {number} Lowest number in array
  * @param max {number} Highest number in array
  * @param rand {bool} Shuffle array
  * @return {array}
  */
  function range( min, max, rand ) {
    var arr = ( new Array( ++max - min ) )
      .join('.').split('.')
      .map(function( v,i ){ return min + i })
    return rand
      ? arr.map(function( v ) { return [ Math.random(), v ] })
         .sort().map(function( v ) { return v[ 1 ] })
      : arr
  }
  
  // Prevent css3 transitions on load
  $('body').addClass('css3-preload')
  $( window ).load(function(){ $('body').removeClass('css3-preload') })

  $.fn.sliced = function( options ) {

    var o = $.extend( {}, _defaults, options );

    return this.each(function() {

      var $container = $(this);

      /*---------------------------------
       * Make the tiles:
       ---------------------------------*/

      var width = $container.width(),
          height = $container.height(),
          $img = $container.find('img'),
          n_tiles = o.x * o.y,
          tiles = [], $tiles;

      for ( var i = 0; i < n_tiles; i++ ) {
        tiles.push('<div class="tile"/>');
      }

      $tiles = $( tiles.join('') );

      // Hide original image and insert tiles in DOM
      $img.hide().after( $tiles );

      // Set background
      $tiles.css({
        width: width / o.x,
        height: height / o.y,
        backgroundImage: 'url('+ $img.attr('src') +')'
      });

      // Adjust position
      $tiles.each(function() {
        var pos = $(this).position();
        $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
      });

      /*---------------------------------
       * Animate the tiles:
...