Dynamic-CSS Example 7 - Begin With Grid Functions

warning : this post is based on previous posts. be sure you read them.

All previous illustrations are basic usage of dynamic-CSS plugin. Grid functions will push the usability of the code to a new level.

Grid mathimaticaly converts 1d array to 2d array with rows and cols .

• "grid" function returns a new index for the current element according to its distance from the provided center point.
• "gridRowCol" returns the current row and col for provided index.

Declaration

-----------------------------------------------------------

dcss.grid(index,count,cols , centerX , centerY,invert);

-----------------------------------------------------------

where

index = index of current element.
count = count of grid cells
cols = count of grid columns
centerX,centerY = center point of the grid have value from 0 to 1.
invert = invert the first element to be last and vice versa.

Usage

   Assume we have a 5 x 5 grid of <div> elements and we want to create transition animation from the bottom-left corner to the top-right corner.

Code

-----------------------------------------------------------
//hide

$('#container').children().filter('div').dcss(

        //css properties to be processed and applied to object

    {

        pointerEvents:'none',

        borderRadius:'100px',

        transform : 'translate(0%,0%)  scale(.5,.5)',

        opacity   : '0',

        transition : 'all 1s <time>s ease-in'

    },

    {

        //values to be applied to property values

        time : function(i,el,c){ 

            var ii = dcss.grid(i,c,5,0,1);

            return  ii * .1;

        } 

    }

);

-----------------------------------------------------------

//show

$('#container').children().filter('div').dcss(

        //css properties to be processed and applied to object

    {

        pointerEvents:'all',

        borderRadius:'20px',

        transform : 'translate(0%,0%) scale(1,1)',

        opacity   : '1',

        transition : 'all .5s <time>s ease-out',

        display:'block'

    },

    {

        //values to be applied to property values

        time : function(i,el,c){ 

            return dcss.grid(i,c,5,.5,1) * .1;

        } 

    });

-----------------------------------------------------------

Result :