Dynamic-CSS Example3 - Multiple variables

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

In this example we will add multiple variables to our  function to have more control on produced css.

Multiple variables
-----------------------------------------------------------
$('#container').children().filter('div').dcss(
    {   
    transform : 'translate(<transX>%,<transY>%)  scale(.5,.5)',
    transition : 'all 1s <delay>s linear' 
    },
    { 
        delay  : function(i,el,c){ return i * .1;},
        transX : function(){ return 50 - Math.random()*100;},
        transY : function(){ return 50 - Math.random()*100;}

    });
-----------------------------------------------------------

-we have changed the translation by random x,y values  with progressive increase in the delay value.-transX function return  a value from  -50  --> 50   and transY as well applied to "transform" property.

-It is to be noted that all variables are computed one time for every element. So we have separated transX and transY.


Running the code