CSS3 and jQuery both have amazing features for web design and development. we can create unbelievable effects using jQuery and CSS3. In this article we are discussing about Paper like unfolding effect using css3 and jQuery.
To implement this effect we need to add some jQuery and CSS3 code with html code. some of code snippets written below
jQuery function for set prefrence values:
// the options
$.PFold.defaults = {
// perspective value
perspective : 1200,
// each folding step's speed
speed : 450,
// each folding step's easing
easing : 'linear',
// delay between each (un)folding step (ms)
folddelay : 0,
// number of times the element will fold
folds : 2,
// the direction of each unfolding step
folddirection : ['right','top'],
// use overlays to simulate a shadow for each folding step
overlays : true,
// the main container moves (translation) in order to keep its initial position
centered : false,
// allows us to specify a different speed for the container's translation
// values range : [0 - 1]
// if 0 the container jumps immediately to the final position (translation).
// this is only valid if centered is true
containerSpeedFactor : 1,
// easing for the container transition
// this is only valid if centered is true
containerEasing : 'linear',
// callbacks
onEndFolding : function() { return false; },
onEndUnfolding : function() { return false; }
};CSS & HTML code available in Source File.