8 jQuery CSS Paper Folding Effect Plugins

One of the trends that I notice in web design is the paper folding effect. Here in this post I am going to give you few resources that will surely inspire you to achieve paper folding effect in web development.

Fold It 3D Menu

jQuery plugin for animated 3D menu. Panel menu for mobile sites/phonegap and full site that features a distinctive 3d perspective accordeon effect . This menu can be the basis of either a mobile web site or packaged as a hybrid app using phonegap.

Fold It 3D Menu

Oridomi

oriDomi is a javascript library that allows you to create a animation which can Folds Up the DOM Like Paper Folding. OriDomi requires a modern browser with support for CSS3 transforms, particularly preserve-3d support. IE 10 and below lack this, but I’m sure you could’ve guessed that.

oridomi-1

PFold

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.

pfold-2

Paperfold CSS

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

paperfold-css-3

Foldup.js

Foldup.js lets you create a “fold up” effect for text on your website. As users resize their browsers, the text folds up in a 3D effect.

foldup-4

jQuery Unfold

Basically the effect works by slicing up a chunk of content and animating the height and rotation of each slice independently. Each slice has multiple wrappers that control the vertical offset of the content relative to that slice. Overall the code isn’t that complex and it only took a touch of math (some basic trig to get the correct wrapper height based on the rotation angle). The browser does almost everything for you.

unfold

Makisu

An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.

makisu-6

The Sexy Curls jQuery Plugin

The Sexy Curls jQuery Plugin is an open-source jQuery plugin by Elliott Kember which lets you share in the beauty of the page fold.

curl-5

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.