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

Dynamic-CSS Example 10 - Working With 3D

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

In this example we will create one dcss call for the container and another call for the grid.

this is only an implementation of the plugin to show how final results may be in production.

Code
-----------------------------------------------------------
//animating container element
    $('#container').dcss({
        transform  : 'perspective( 600px ) rotateY(<ang>deg)',
        transition : 'all 2s 0s ease-in-out',
        transformStyle: 'preserve-3d'
    },
    {
        ang : function(){
            var rnd = Math.random() * 360;
            return -180 + rnd;
        },
    });
    
//animating grid elements
$('#container').children().filter('div').dcss(
        //css properties to be processed and applied to object
    {
        pointerEvents:'none',
        transform : 'translate3d(0px,0px,<z>px) scale(1,1)',
        opacity   : '0',
        transition : 'all <time>s <delay>s ease-in-out'
    },
    {
        //values to be applied to property values
        z     : function(i){
            return -200 + Math.random() * 400;
        },
        
        delay : function(i){ 
            return Math.random() * .5;
        },
        time  : function(i){ 
            return .5 + Math.random() * .5;
        } 
    }

);

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

The normal image to be used

Result

Dynamic-CSS Example 9 - Invert Grid Selection

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

As grid selects elements near center point first so if we set center to  0.5,0.5 , first element will be the centeral element and it will always start animation before others. Setting "invert" param to true will select the farest element first then the nearer till the centeral element to be last selected element.

Normal animation :

Code

-----------------------------------------------------------
$('#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 1s <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,.5,false) * .1;
        } 

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

Inverted Grid Selection

Code

-----------------------------------------------------------
$('#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 1s <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,.5,true) * .1;
        } 

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

Result : 

Dynamic-CSS Example 8 - Vertical and Horzintal Animation With Grid Function

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

In previous Post we have created an awesome grid animation. In this post we will create a another grid animation which affect rows as a unit or cols as a unit.

In this example all row cells will have the same grid index so, they will be animated synchronusly.

ideacenter point affect cells in both directions vertical and horizontal.

to disable animation gradient in one direction just pass null instead of 0.0-1.0 value.

dcss.grid(i,c,5,0,null);

all elements in the same column will have the same index and hence the same delay.

Code
-----------------------------------------------------------
$('#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,null);
            return  ii * .1;
        } 
    }

);
-----------------------------------------------------------

Result : 

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 : 

Dynamic-CSS Example 6 - String Values

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

As all CSS values are written as strings,so we can play with functions returning a string to affect elements behavior.

Code-----------------------------------------------------------
$('#container').children().filter('div').dcss(
    {   
    height : '400px',
    transition : 'all 1s 0s ease<in><out>'
    },
    { 
        in : function(i,el,c){return (i % 2 == 0) ? '-in':''; },
        out : function(i,el,c){return (i % 2 == 1) ? '-out':''; }
    });
    

};
-----------------------------------------------------------
  Even indices will "-in" string while odd will return '-out'  string.

Result :

In this example you may notice that :

• you can return an empty string "" value null or undefined. 
• we can combine the in,out variables in one variable

Code-----------------------------------------------------------
$('#container').children().filter('div').dcss(
    {   
    height : '400px',
    transition : 'all 1s 0s ease<in_out>'
    },
    { 
        in_out: function(i,el,c){return (i % 2 == 0) ? '-in':'-out'; }
    });
    

};
-----------------------------------------------------------

the result will be the same as the above.

Dynamic-CSS Example 5 - Calling Key-frames

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

Modifing CSS keyframe values is one of limitations of css that we are trying to fix. dynamic-CSS cannot modify values in css style cheat but only, it can use them inside 'Animation' or 'Transition' values. 

In this tutorial we will try to change the behavior by changing  duration.

Code
-----------------------------------------------------------
//key frame
@-webkit-keyframes test{
            
            0%{
                background : red;
            }
            50%{
                background:green;
            }
            100%{
                background : blue;
            }

        };
-----------------------------------------------------------
//javascript 
$('#container').children().filter('div').dcss(
    {   
        animation : 'test <dur>s 0s ease-in-out alternate infinite'
    },
    { 
        dur   : function(i,el,c){return 1 + Math.random() * 5;},

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