Mozilla Demo Studio

Submit a Demo
Learn More
Welcome to the Mozilla Demo Studio, where developers like you can develop, share, demonstrate, and learn all about Web technologies. See what's possible by exploring Demo Studio:
- View demos that showcase what HTML, CSS, and JavaScript can do.
- Inspect the source code for those demos so you can see how they work.
- Read documentation to learn about the open standards and technologies that power the Web.

Paperfold CSS

By mrflix on Mar 31, 2012

Fold divs like paper

Launch Demo
Share It
- Share It
- Share on Twitter
- Share on Facebook

Built using JavaScript, HTML5, CSS3, Mobile,

98046 views
1164 likes
10 comments

More About This Demo From The Author

I'm currently working on 'buddycloud', a federated social network. This is a proposal for a visual folding-effect for hidden comments.

The plugin takes a dom element, slices it into parts and arranges them like a folded paper in 3d space.

10 comments so far

rudolfrck said,

Posted 1 month ago

Great demo! Love the concept.
Only challenge is that you are animating the height property, which gives poor performance on almost any mobile device because of the repaints. If this could somehow be done with translate or anything similar it would greatly increase the performance.
1. mrflix said,
  
  Posted 1 month ago
  
  Rudol, great point.
  While developing I checked it using Safari's awesome hardware-acceleration debugger and wonderd where the repaints come from. Now as you name its obviouse that it's triggered by the height. Changing that to a translation on the y-axis seems not to hard to implement: I can move everything down via translation. It just seems quite complex if there are following posts. Can I move them down using the normal element-flow (e.g. no translation) without redraw?triggers
onkelyoo said,

Posted 1 month ago

great job (Echt man krass :D). I just started learning HTML, CSS and JS but this is really nice. RESPECT! Greetings from Hamburg!
1. mrflix said,
  
  Posted 1 month ago
  
  Hey, schön was aus Hamburg zu hören. Da muss ich bald mal hin tuckeln - is ja nich weit von Berlin. Einfach dran bleiben - bin vor drei Jahren auch am Anfang gestanden. Es macht echt Spass, wenn du zu dem Punkt kommst, an dem du einfach alles basteln kannst so wie du es dir vorstellst.
IvanMoreno said,

Posted 1 month ago

Nice stuff!
doktor said,

Posted 1 month ago

Very sexy - love the effect... but... change height to 344 and click Open - goes into endless loop and never completes task - Chrome, latest cut at the time of writing
mattx said,

Posted 1 month ago

awesome!!!!
Subbu said,

Posted 1 month ago

Hi,
Its a great, demo, but i find some problem with it.
If i adjust "time","3d" everything is fine.
When the height is adjust (not the default) to 230 or something, the timer bar goes left-right and back
Is it a bug or something

-Subbu
apaatsio said,

Posted 3 weeks ago

Very nice. Have you assessed the performance? On a new desktop it seems to work fine but how about mobile devices?

And I noticed the folding doesn't work with canvas elements. The folded version only shows an empty canvas even if the original canvas had some graphics in it. I believe the cloning of elements loses the canvas data and you need to redraw each canvas clone separately.
1. mrflix said,
  
  Posted 5 days ago
  
  Oh yes, makes sense that the information on canvases gets lost on the way.
  I tested the demo on an iPod touch (4th gen.) and an iPad 2 and it performed well.
  The performance bottleneck lies in the cloning of the elements. I see two solutions for that: 1.) background: element (http://hacks.mozilla.org/2010/08/mozelement/) and 2.) arbitrary folds - fold for each div. Therefore the animation has to be calculated in Javascript - so that's no optimal solution. Though - one might be able to generate a fitting bezier curve for every slide and then animate via css-transitions.