gridImageAnimation.js---a plugin creates the grid of the image and run the animation

This plugin, developed in jQuery, creates the grid of the image and run the animation chosen by the user: fadeIn and fadeOut. It is completely configurable, users can choose the size of the cells of the grid, the speed of the animations, the type of animations etc.


GitHub here

Step1:
link jQuery and gridImageAnimation.js

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="gridImageAnimation.js"></script>

Step2:

html

A button which has classname and the picture you want to show on the screen.

css

Basic styles.
And the first and third images should be hide before launch the function.

Step3:

js

When click the button,check the className.
If the button has the classname called run-demo1, we can recongnize the range of the function processing. Then show the picture you wanna below with gridImageAnimmation.

var grid = img.gridImageAnimation({ 'mode' : 'fadeIn',

                                      'cell' : 15 ,

                                      'speed' : 70,

                                      'durationFading' : 200,

                                      'previewBox' : null,

                                       complete : null

                                    });     

• mode : fadeIn() or fadeOut(). In the first one the image appears, in the second one (obvioulsy) it scompares;
• cell : default is 15, this means that width and height are divided in 15 parts; A value too little will create disturbs;
• speed : is the delay between the animation of a cell and another one;
• durationFading : is the time that cells take to compare/scompare;
• previewBox : it's the element where the user want to animate the image. If it's null the grid will replace the original image;
• complete : is the function that will be run when the animation ends;

When the process complete, we can add a "complete" classname and html.

When checking the classname=complete,return false.