jQuery Plugin To Animate The Grids Of An Image - GridImageAnimations

File Size: 708 KB
Views Total: 780
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Animate The Grids Of An Image - GridImageAnimations

GridImageAnimations is a fancy jQuery plugin that splits a given image to several grids and you can then animate them when needed.

How to use it:

1. Load the jQuery GridImageAnimations plugin after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="gridImageAnimation.js"></script>

2. Call the main function gridImageAnimation on the target image and specify the animation type (fadeIn or fadeOut) you prefer.

$('.myImg').gridImageAnimation({
  'mode' : 'fadeIn' // or fadeOut
});

3. Config the animation with the following options.

$('.myImg').gridImageAnimation({

  // how many cells
  cell : 15 ,

  // animation speed
  speed : 70,

  // duration
  durationFading : 200, 

  // null = the original image
  previewBox : null,

  // callback function
  complete : null
  
});

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