Reveal
(3 panels)
Keeps the anchor panel flat against the surface of the page.
fold me on Github
Keeps the anchor panel flat against the surface of the page.
domi2.reveal(40);
Panels ascend toward or descend away from the viewer.
domi3.stairs(-25, 'right');
Compresses the element like the bellows of its namesake.
domi4.accordion(-50);
An alternative to sharp folds. Looks best with higher panel counts.
domi5.curl(-60, 'top');
Folds the composition up one panel at a time.
Calling reset()
after any effect returns to the initial state.
TV
Sabbatical.
Click to toggle folding.
domi6.isFoldedUp ? domi6.reset() : domi6.foldUp();
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:
$domi.oriDomi().foldUp();
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.
forceAntialiasing: true
option.
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.
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.