Paper Unfolding 3D Effect In Jquery

File Size:401.02 KB
Views Total:236
Last Update:December 25, 2017
Publish Date:December 25, 2017
Official Website:Go to website
License:MIT

Paper fold is a jQuery plugin that makes it possible to open elements in a paper like unfolding effect. Unfolding Effect Plugin called PFOLD is a amazing Jquery plugin that it can display all the HTML elements as a Paper-Like Unfolding Effect.

How to use :

  1. Add Html the following structure :
    <div id="uc-container" class="uc-container">
    	<div class="uc-initial-content">
    		<!-- initial content -->
    	</div>
    	<div class="uc-final-content">
    		<!-- final content -->
    	</div>
    </div>

2. The plugin can be called like this:

$( '#uc-container' ).pfold();

3. The following options are available:

/ 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; }
};

Done 🙂