Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 6eb2b8c666
Fetching contributors…

Cannot retrieve contributors at this time

254 lines (216 sloc) 9.237 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Dan Motzenbecker">
<meta name="description" content="oriDomi - Fold up the DOM like paper - origami for the web">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>oriDomi - Fold up the DOM like paper - origami for the web</title>
<link href="demo/demo.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:100,900" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div class="menu">
<ul>
<li><a href="#features">Features</a></li>
<li>
<a href="#examples">Examples</a>
<ul>
<li><a href="#example-reveal">Reveal</a></li>
<li><a href="#example-stairs">Stairs</a></li>
<li><a href="#example-accordion">Accordion</a></li>
<li><a href="#example-curl">Curl</a></li>
<li><a href="#example-fold-up">Fold Up</a></li>
</ul>
</li>
<li><a href="#usage">Usage</a></li>
<li><a href="#caveats">Caveats</a></li>
<li><a href="#final">Final Thoughts</a></li>
</ul>
</div>
<a href="https://github.com/dmotz/oridomi" target="_blank" class="fold-me">
<p>fold me on Github</p>
</a>
<header>
<div class="rotation">
<div class="demo1">
<h1>Hello.</h1>
<h4>my name is oriDomi.</h4>
</div>
</div>
<div id="tagline">
<h1>Fold up the DOM like paper.</h1>
</div>
<p id="author">
by
<a href="http://oxism.com">Dan Motzenbecker</a>,
<a href="http://twitter.com/dcmotz">@dcmotz</a>
</p>
<h2><a href="oridomi.js">oridomi.js</a> / <a href="oridomi.min.js">oridomi.min.js</a></h2>
<br><br>
<h3 id="view-docs"><a href="docs/oriDomi.html">Annotated source</a></h3>
<h3 id="get-source"><a href="https://github.com/dmotz/oridomi">Github repository</a></h3>
</header>
<section id="features">
<div>
<h2>Features</h2>
<ul>
<li><em>zero</em> dependencies</li>
<li>less than 15k</li>
<li>optional jQuery support</li>
<li>works on iOS</li>
<li>built in touch handlers with callbacks</li>
</ul>
</div>
</section>
<section id="examples">
<h2>Examples</h2>
<h5>(touch or drag to fold)</h5>
<ul>
<li id="example-reveal">
<article>
<h4>Reveal</h4>
<h5>(3 panels)</h5>
<p>Keeps the anchor panel flat against the surface of the page.</p>
</article>
<div class="demo demo2">Late Capitalism</div>
<pre>
domi2.reveal(40);
</pre>
</li>
<li id="example-stairs">
<article>
<h4>Stairs</h4>
<h5>(5 panels)</h5>
<p>Panels ascend toward or descend away from the viewer.</p>
</article>
<div class="demo demo3">Delight</div>
<pre>
domi3.stairs(-25, 'right');
</pre>
</li>
<li id="example-accordion">
<article>
<h4>Accordion</h4>
<h5>(6 panels)</h5>
<p>Compresses the element like the bellows of its namesake.</p>
</article>
<div class="demo demo4"></div>
<pre>
domi4.accordion(-50);
</pre>
</li>
<li id="example-curl">
<article>
<h4>Curl</h4>
<h5>(10 panels)</h5>
<p>An alternative to sharp folds. Looks best with higher panel counts.</p>
</article>
<div class="demo demo5">Tennis Court Oath</div>
<pre>
domi5.curl(-60, 'top');
</pre>
</li>
<li id="example-fold-up">
<article>
<h4>Fold Up</h4>
<h5>(5 panels)</h5>
<p>
Folds the composition up one panel at a time.<br>
Calling <code>reset()</code> after any effect returns to the initial state.
</p>
</article>
<div class="demo demo6"><p>TV<br>Sabbatical.</p></div>
<p>Click to toggle folding.</p>
<pre>
domi6.isFoldedUp ? domi6.reset() : domi6.foldUp();
</pre>
</li>
</ul>
</section>
<section id="usage">
<div>
<h2>Usage</h2>
<p><b>oriDomi</b> works with or without a DOM library like jQuery.</p>
<p>First, initialize your target element with <b>oriDomi</b> using either jQuery:</p>
<pre>
var $domi = $('.my-div').oriDomi();
</pre>
<p>or using the standard DOM API:</p>
<pre>
var domi = new OriDomi(document.getElementsByClassName('my-div')[0]);
</pre>
<p>You can pass a number of options when initializing <b>oriDomi</b> on an element.</p>
<p>Options can include the number of horizontal and vertical panels, speed, perspective distance, shading method,
as well as a few others.</p>
<p>For example:</p>
<pre>
var $domi = $('.my-div').oriDomi({ vPanels: 3, hPanels: 10,
perspective: 200, speed: 500, shading: false });
</pre>
<p>Once <b>oriDomi</b> is initialized on an element, you can call methods like so:</p>
<pre>
$domi.oriDomi('accordion', -30, 'right');
</pre>
<p>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).<br>Left is default.</p>
<p>Alernatively, you can use this syntax style when using jQuery:</p>
<pre>
$domi.oriDomi().foldUp();
</pre>
<p>You can also pass an options object
literal as another argument, which can include a callback function to run when the animation completes.</p>
<p>Methods include accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.</p>
<p>Keep in mind, you can pass shorthand anchor names such as
<code>'l'</code>, <code>'r'</code>, <code>'t'</code>, <code>'b'</code> or
<code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>.</p>
<pre>
$domi.oriDomi('reveal', 44, 1,
{ callback: function(){ alert('oriDomi reveal finished!') } });
</pre>
<p>For a detailed look, read through the <a href="docs/oriDomi.html">annotated source</a>.</p>
</div>
</section>
<section id="caveats">
<div>
<h2>Caveats</h2>
<ul>
<li><b>oriDomi</b> only works in modern browsers that support CSS 3D transforms<br>
<span>If a browser doesn&rsquo;t support <b>oriDomi</b>, the DOM won&rsquo;t be touched.</span></li>
<li><b>oriDomi</b> works best in WebKit browsers.<br>
<span>Firefox is supported, but antialiasing doesn&rsquo;t work well yet.
You can force antialiasing in Firefox with the <code>forceAntialiasing: true</code> option.</span>
</li>
<li>If you&rsquo;re targeting an element that has dimensions defined by media it contains (e.g. an image),
be sure to wait until the image is loaded before invoking <b>oriDomi</b>.<br>
<span><b>oriDomi</b> works best when you define a width and height on the target element.</span>
</li>
</ul>
</div>
</section>
<section id="final">
<div>
<h2>Final Thoughts</h2>
<p><b>oriDomi</b> is new, so it likely has some bugs.</p>
<p>If you have an idea or a bugfix, please contribute to the <a href="https://github.com/dmotz/oridomi">Github repo</a>.</p>
<p>If you enjoy <b>oriDomi</b>, check out my iPhone app <a href="http://chaincalapp.com">ChainCal</a>.</p>
<p>Or, <a href="http://twitter.com/dcmotz">follow me on twitter.</a></p>
<p>The DOM is your oyster.</p>
</div>
</section>
<script src="oridomi.js"></script>
<script src="demo/demo.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33974399-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.