fold me on Github


my name is oriDomi.

Fold up the DOM like paper.

by Dan Motzenbecker, @dcmotz

oridomi.js / oridomi.min.js

Annotated source

Github repository



(touch or drag to fold)


oriDomi works with or without a DOM library like jQuery.

First, initialize your target element with oriDomi using either jQuery:

var $domi = $('.my-div').oriDomi();

or using the standard DOM API:

var domi = new OriDomi(document.getElementsByClassName('my-div')[0]);

You can pass a number of options when initializing oriDomi on an element.

Options can include the number of horizontal and vertical panels, speed, perspective distance, shading method, as well as a few others.

For example:

var $domi = $('.my-div').oriDomi({ vPanels: 3, hPanels: 10,
    perspective: 200, speed: 500, shading: false });

Once oriDomi is initialized on an element, you can call methods like so:

$domi.oriDomi('accordion', -30, 'right');

The first argument is the method to be called, the second is the angle to rotate by, and the third, optional argument is the anchor from which to transform (left, right, top, bottom).
Left is default.

Alernatively, you can use this syntax style when using jQuery:


You can also pass an options object literal as another argument, which can include a callback function to run when the animation completes.

Methods include accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.

Keep in mind, you can pass shorthand anchor names such as 'l', 'r', 't', 'b' or 1, 2, 3, 4.

$domi.oriDomi('reveal', 44, 1,
    { callback: function(){ alert('oriDomi reveal finished!') } });

For a detailed look, read through the annotated source.


Final Thoughts

oriDomi is new, so it likely has some bugs.

If you have an idea or a bugfix, please contribute to the Github repo.

If you enjoy oriDomi, check out my iPhone app ChainCal.

Or, follow me on twitter.

The DOM is your oyster.

Free jQuery Plugins, HTML5 and CSS3 Scripts - Providing tons of Jquery Plugins,Html5 and CSS3 Scripts for web developers to preview and download. By using these resources, you can create amazing effects with fancy animations of content elements like text, images and so on.