Slice Images into Tiles with jQuery and CSS3

In this tutorial, we are going to create a simple plugin built with jQuery and CSS3 transitions that splits images into pieces and then put them back together.  It's an awesome animation effect which has been used in many cool slideshow plugins.

How to use it:

1. Include jQuery Library in your head section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 

2. Create a button to toggle the effect

<button>Toggle</button>

3. Insert a image

<div class="sliced">
  <img src="images.jpg"/>
</div>

4. The CSS

.sliced {
    position: relative;
    width: 500px; 
    height: 375px;
}
.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;
}

5. Javascript

<script type='text/javascript'>//<![CDATA[ 
$(function(){
;(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:
       ---------------------------------*/

      var tilesArr = range( 0, n_tiles, o.random ),
          tileSpeed = o.speed / n_tiles; // time to clear a single tile

      // Public method
      $container.on( 'animate', function() {

        tilesArr.forEach(function( tile, i ) {
          setTimeout(function(){
            $tiles.eq( tile ).toggleClass( 'tile-animated' );
          }, i * tileSpeed );
        });

      });

    });

  };

}( jQuery, window ));

$('.sliced').sliced({ x: 6, y: 4, speed: 1000 });

$('button').click(function() {
    $('.sliced').trigger('animate');
});
});//]]>  

</script>

---

This awesome jQuery plugin is developed by elclanrs. For more Advanced Usages, please check the demo page or visit the official website.