Dynamic-CSS Example 11 - Grid Rows and Columns

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


yet another function to be used a helper for dyamic-CSS plugin called "gridRowCol".

Declaration

-----------------------------------------------------------
dcss.gridRowCol(index,cols);
-----------------------------------------------------------

where 
index = true index of current element.
​cols = number of columns in the grid.
return  object with ".row" and ".col" properties providing the grid position.


we are going now to calculate the background position to each element to get a fragement effect on image.



Normal Image will be used :

Code

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

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

        //css properties to be processed and applied to object

    {

        background: 'url(images/1.jpg)',

        backgroundPosition: '<left>% <top>%',

        backgroundSize: '500% 500%'

    },

    {

        left :  function(i,el,c){

            var rc =  dcss.gridRowCol(i,5);

            return rc.col / (5-1) * 100;

        },

        top :  function(i,el,c){

            var rc =  dcss.gridRowCol(i,5);

            return rc.row / (5-1) * 100;

        }

        

    });

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

Result