Monday, November 10, 2014

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 : 









No comments:

Post a Comment