Paperfold JS

3d Paperfold Animation Library

Toggle Comments
Vera
from Campus Library
3 days ago
Lorem ipsum Commodo dolor amet proident ut anim sint nisi non dolore dolor eiusmod culpa nulla velit adipisicing dolor dolor ad ut amet in.
View previous comments
Gero
from Regensburg
3 days ago
Mollit proident in nostrud velit nisi exercitation eu reprehenderit anim magna in officia.
Betty
from Deggendorf
3 days ago
Aute quis consectetur cupidatat laborum Duis et nulla.
Vera
from Home
5 days ago
Aute quis consectetur cupidatat laborum Duis et nulla ut anim quis dolore cillum incididunt ad pariatur sit ullamco officia sint Ut elit aliquip irure eu elit aliqua nisi non esse culpa dolore labore elit pariatur nulla veniam labore ea id fugiat ad et dolor in Duis dolore reprehenderit elit sint amet commodo nostrud non consectetur.
Download paperfold.js Download paperfold.min.js

Usage

Include jQuery and paperfold.js in your site.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/path/to/paperfold.js"></script>

Call paperfold on the container you want to fold and bind the fold interaction to a button or any other interaction.


$(function() {
	var paperfold = $('.hidden').paperfold();

	$('.paperfold-toggle').click(paperfold.toggle);
});

Methods

Method Description
open() Open the paperfold.
close() Close the paperfold.
toggle() Toggle the paperfold.
percentage(0..1) Set the fold to a percentage.

Options

Options Default Description
duration 240 Animation duration in ms
maxFoldHeight 200 Maximal fold height in pixels. Paperfold will slice even sized cuts based on this maximal fold height.
folds null Alternative to maxFoldHeight. Paperfold will slice the content into this amount of folds.
perspective '1000px' The 3D CSS perspective value. A smaller value maxes the depth effect more extreme.
topShadow 'linear-gradient(transparent, rgba(0,0,0,.5))' The shadow for the top sides. This shadow will fade from 1 to 0 opacity.
bottomShadow 'linear-gradient(rgba(0,0,0,.5), transparent)' The shadow for the bottom sides. This shadow will fade from 1 to 0 opacity.
isOpen false Defines if the content should initially be open (true) or closed (false). If the content is initially not open, you should prevent the content from beeing visible before paperfold gets activated by adding a display: none via CSS.
onProgress $.noop A progress callback function. Passes a percentage parameter (0-1) from closed to open
stayInPlace false If activated, paperfold will try to keep scroll-position in place while animating.

About

Paperfold JS is based on Paperfold CSS – a 3D CSS experiment from 2011.