From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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();
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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:
awesome thing i’ve ever seen on the web . great π , thanks .
Great effect, awesome work. π
Very nice work Pedro! π
Simply cool…
Amazing !!!!!
Extra!
Liked the great effect,
and the funny “monkeys” demo text!
In demo 1, small typo:
“wanted” inst. of ” wated”.
thanks!
Nice work! I like the easy setup options.
This is truly great… ‘sick’ if you will. Great work, love it!
Nice one. How close are we to being able to make this only with css?
I did something similar: http://codepen.io/ferra-andre/full/Kxhiv
This is great..! Nice effect. Thanks a ton for sharing.
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!
Awesome as usual!
Thanks a ton for sharing. great work! love it! π
Awesome great work π
Very Gooooooooooooooooooooooooood!
Thank you π
Wonderful work… thanks u for sharing…
really great effect !!
thanks !!
Great demo.
I was trying it out but I cannot seem to put a working link in the text inside.
Anyone?
– Thomas
This is amazing π
Hi, I am very new to all this CSS thing but I would like to use this sample but I donΒ΄t know how. Can anybody help me out with it ?
Hi! Very cool animation effect, thanx!
But I wonder are there any way to animate an expansion to image that fits odd number of thumb heights/widths?
Any answer?
This is a sick plugin, Pedro! With IE8 fallback too! It has no practical purpose, but using this for one thing on a site can add a lot of appeal. Thanks.
is it possible for the width and height to be other than those in the demo?
WARNING! This will only work if you have a 3D graphic card! or your CPU has an internal GPU!!!
Seems like the 3D-things in css/js are directly rendered via GPU usage.
I have to correct myself: This will also work without 3D-acceleration, but current version of Chrome (v23) fails to render 3D transforms on Ubuntu systems. That’s the point.
Possible to run this in reverse? As in start with an “unfolded” “piece of paper” and then fold it up? One would think so, but methinks it might not be possible without rewriting the plugin itself.
Hi, this is a pretty cool plugin.
I was looking for something similar to the control used on this page.
With PFold, if we scroll the page to a position where part of the page control is hidden, it slides down the entire container to adjust itself to the nearest visible areas. This can also be achieved by resizing browser window and yet on mobile browsers.
The control used in the aforementioned link doesn’t have such issue.
Can you please advise, how to fix this problem for mobile browsers and various display sizes?
Thanks.
Any idea how to change the size of the unfolded image?
I keep looking for the container that controls that in any of the 3 css files, but no dice.
Nevermind.
Figured that out.
My main issue is having the final content image centered in the page. Or better yet, centered in the surrounding container I have the effect inside.
Do I need to combine style sheets? Because the container styling for the effect is in my main CSS.
Can you tell me how do you change the size of unfolded image?? I also have same question.
hi there,
i’m trying to use this plug in, but i’m failing with the way it folds.
my initial container is a square and i need three folds. i only get a final container with the 2×4 dimension of the initial. but i need a final container with the 2×3 dimension of the initial. the plug in always doubles the dimensions. is there a way to make it only add another value of the initial container?
A Question: is it possible to use this plugin on the responsive width and height, not fixed? If yes, is it by default plugin already calculating or is something that needs to be added in the parameters? Thanks!
Would set the initial box height of 100px and 300px in box end?
is there a way to add multiple boxes that unfold like this page?
Can you please tell if we insert all the images inside a table to change its structure a lil bit wil it work?? Its not working for me, So can anyone tell will ever work or then we cannot use this plugin??