in Playground

PFold: Paper-Like Unfolding Effect

A highly experimental jQuery plugin that let's you unfold elements to reveal more content just like on a piece of paper. Unfolding directions and number of steps can be specified.

PFold: Paper-Like Unfolding Effect

View demo Download source

PFold is a very experimental jQuery plugin that makes it possible to open elements in a paper-like unfolding effect. An element can be unfolded in 3D in order to reveal some other content. The idea is to have several levels of folding, where each step of opening will double the element size, hence imitating a folded paper being opened.

A couple of options are available, such as the unfolding direction for each step and the number of folding steps.

For browsers that don’t support CSS 3D transforms or transitions, there will be a simple fallback, i.e. the larger content appears.

For using the plugin, the following structure is expected:

<div id="uc-container" class="uc-container">
	<div class="uc-initial-content">
		<!-- initial content -->
	</div>
	<div class="uc-final-content">
		<!-- final content -->
	</div>
</div>

The final content’s size will depend on the initial content’s size (set in the CSS), the folding directions and the number of folding steps. For example, having an initial element of 200px width and height, a folding direction of bottom and left and two folding steps will create a final area of 400px in width and height.

The plugin can be called like this:

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

Options

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

Check out the three demos with different configurations:

Find this project on Github

View demo Download source

Previous:
Next:

Tagged with:

View all contributions by

Website: http://tympanus.net

Related Articles

MeshLines_Featured

Animated Mesh Lines

landscape_featured

Interactive Animated Landscape

Ambient_featured

Ambient Canvas Backgrounds

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 37

Comments are closed.
  7. 7

    Liked the great effect,
    and the funny “monkeys” demo text!

    In demo 1, small typo:
    “wanted” inst. of ” wated”.

    thanks!

  13. 13

    Very cool project, is it possible to have some kind of lightbox type of navigation between photos on a page? Thanks a ton for sharing it!

  19. 19

    Great demo.

    I was trying it out but I cannot seem to put a working link in the text inside.

    Anyone?

    – Thomas

Comments are closed.