Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

659 lines (540 sloc) 17.743 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Dan Motzenbecker">
<meta name="description" content="OriDomi - origami for the web">
<meta name="viewport" content="width=device-width, initial-scale=0.6">
<title>OriDomi - 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="favicon.png" rel="icon" type="image/png" >
</head>
<body>
<header>
<h1 class="logo">OriDomi<sup>1.1</sup></h1>
<h2>The web is flat, but now you can fold it up.</h2>
<h5>open source JavaScript library by <a href="http://oxism.com">Dan Motzenbecker</a></h5>
<div>
<a class="button" href="https://github.com/dmotz/oriDomi">download on github</a>
<a class="button" href="docs/oridomi.html">read annotated source</a>
</div>
</header>
<ul id="menu">
<li><a href="#">OriDomi</a></li>
<li><a href="#demos">Demos</a></li>
<li><a href="#features">Features</a></li>
<li>
<a href="#usage">Usage</a>
<ul>
<li><a href="#initialization">Initialization</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#effects">Effects</a></li>
<li><a href="#callbacks">Callbacks</a></li>
<li><a href="#queueing">Queueing</a></li>
<li><a href="#touch">Touch</a></li>
<li><a href="#content-manipulation">Content manipulation</a></li>
<li><a href="#ripple">Ripple</a></li>
<li><a href="#responsive">Responsive</a></li>
<li><a href="#custom-sizing">Custom panel sizing</a></li>
<li><a href="#custom">Custom behavior</a></li>
<li><a href="#minutiae">Minuti&aelig;</a></li>
</ul>
</li>
<li><a href="#coda">Coda</a></li>
</ul>
<noscript>
<div class="warning">
Your browser has JavaScript disabled. OriDomi needs JavaScript turned on
to work. Otherwise, all you&rsquo;ll see here are some flat text and images.
Visit <a href="http://www.enable-javascript.com">this site</a> if you need
help turning it on.
</div>
</noscript>
<div id="unsupported" class="warning">
Sorry, looks like your browser is too old to support OriDomi, so all you&rsquo;ll
see below are some flat images and text. To get the most out of the web,
consider upgrading to a browser that supports modern standards. Try
<a href="https://www.google.com/chrome">Chrome</a>,
<a href="http://www.apple.com/safari">Safari</a>, or
<a href="http://www.firefox.com">Firefox</a>.
</div>
<section id="demos">
<h2>
Fold the
<a href="http://en.wikipedia.org/wiki/Document_Object_Model" target="_blank">DOM</a>
like paper.
</h2>
<h3>
Use your mouse or touch to manipulate these, or press the <b>fold</b>
button to see a random effect:
</h3>
<ul>
<li>
<div class="demo demo1">
<h3>Hello.</h3>
<p>from DOM-land</p>
</div>
<div>
<div class="label">accordion(20)</div>
<div class="button" data-n="0">fold</div>
</div>
</li>
<li>
<div class="demo demo5"></div>
<div>
<div class="label">reveal(30)</div>
<div class="button" data-n="4">fold</div>
</div>
</li>
<li>
<div class="demo demo2">
<h3>Late<br>Capitalism</h3>
</div>
<div>
<div class="label">reveal(40)</div>
<div class="button" data-n="1">fold</div>
</div>
</li>
<li>
<div class="demo demo3">
<h3>Tennis<br>Court<br>Oath</h3>
</div>
<div>
<div class="label">accordion(-20)</div>
<div class="button" data-n="2">fold</div>
</div>
</li>
<li>
<div class="demo demo4">
Ersatz
</div>
<div>
<div class="label">stairs(18)</div>
<div class="button" data-n="3">fold</div>
</div>
</li>
<li>
<div class="demo demo6">
<pre>
/*
$$$$$$\ $$\ $$$$$$$\ $$\
$$ __$$\ \__|$$ __$$\ \__|
$$ / $$ | $$$$$$\ $$\ $$ | $$ | $$$$$$\ $$$$$$\$$$$\ $$\
$$ | $$ |$$ __$$\ $$ |$$ | $$ |$$ __$$\ $$ _$$ _$$\ $$ |
$$ | $$ |$$ | \__|$$ |$$ | $$ |$$ / $$ |$$ / $$ / $$ |$$ |
$$ | $$ |$$ | $$ |$$ | $$ |$$ | $$ |$$ | $$ | $$ |$$ |
$$$$$$ |$$ | $$ |$$$$$$$ |\$$$$$$ |$$ | $$ | $$ |$$ |
\______/ \__| \__|\_______/ \______/ \__| \__| \__|\__|
v. 1.0.0
*/
var demo6 = new OriDomi('.demo6', {
hPanels: 4,
ripple: true,
shading: false
});
</pre>
</div>
<div>
<div class="label">stairs(20)</div>
<div class="button" data-n="5">fold</div>
</div>
</li>
<li id="fibonacci">
<div class="demo demo7"></div>
<div>
<div class="label">reveal(45)</div>
<div class="button" data-n="6">fold</div>
</div>
<p class="note">
* This demo illustrates the ability to define custom panel sizes:
the proportions here follow a reversed Fibonacci Sequence
(1, 1, 2, 3, 5, 8, 13, 21, 34).
</p>
</li>
</ul>
</section>
<section id="features">
<h1>Features</h1>
<ul>
<li>zero dependencies</li>
<li>fully responsive sizing</li>
<li>works with media queries</li>
<li>~20k minified</li>
<li>animation queueing</li>
<li>iOS compatible</li>
<li>touch &amp; mouse handlers</li>
<li>fluent interface</li>
<li>animation callbacks</li>
<li>optional jQuery plugin</li>
</ul>
</section>
<section id="usage">
<h1>Usage</h1>
<h2 id="initialization">Initialization</h2>
<p>
Create an OriDomi instance by passing your target element to the constructor:
</p>
<pre>
<code>
var folded = new OriDomi(document.getElementsByClassName('paper')[0]);
</code>
</pre>
<p>
&hellip;or pass a selector string and OriDomi will use the first
element that matches:
</p>
<pre>
<code>
var folded = new OriDomi('.paper');
</code>
</pre>
<p>If you prefer using jQuery, try this:</p>
<pre>
<code>
var $folded = $('.paper').oriDomi({/* options object */});
// when using jQuery, iterate OriDomi methods over multiple elements like this:
$folded.oriDomi('accordion', 20);
// to access the OriDomi instance at the top of the jQuery selection directly:
var folded = $folded.oriDomi(true);
</code>
</pre>
<h2 id="options">Options</h2>
<p>
When creating a new OriDomi composition, you can pass a map of options
as the second argument:
</p>
<pre>
<code>
var folded = new OriDomi('.paper', {
vPanels: 5, // number of panels when folding left or right (vertically oriented)
hPanels: 3, // number of panels when folding top or bottom
speed: 1200, // folding duration in ms
ripple: 2, // backwards ripple effect when animating
shadingIntesity: .5, // lessen the shading effect
perspective: 800, // smaller values exaggerate 3D distortion
maxAngle: 40, // keep the user's folds within a range of -40 to 40 degrees
shading: 'soft' // change the shading type
});
</code>
</pre>
<p>
A full list of options and their descriptions is available
<a href="./docs/oridomi.html#section-59">here in the source</a>.
</p>
<h2 id="effects">Effects</h2>
<p>
Most effect methods only require a folding angle as their first argument.
</p>
<pre>
<code>
folded.accordion(30);
</code>
</pre>
<p>
You can specify the anchor to fold from (left, right, top, or bottom)
as the second argument:
</p>
<pre>
<code>
folded.curl(-50, 'top');
</code>
</pre>
<p>
<code>foldUp()</code> is a unique effect method that doesn&rsquo;t take an
angle argument because it causes the OriDomi composition to roll up completely
in a staggered fashion.
</p>
<pre>
<code>
// completely hides the element:
folded.foldUp();
</code>
</pre>
<p>
Its counterpart <code>unfold()</code> will be automatically called before
another effect method can be applied.
</p>
<p>
You can browse through all the effect methods
<a href="./docs/oridomi.html#section-188">here in the source</a>.
</p>
<h2 id="callbacks">Callbacks</h2>
<p>
Maybe you&rsquo;d like to do something when an animation&rsquo;s complete?
Pass a callback function:
</p>
<pre>
<code>
folded.curl(-50, 'top', function(event, instance) {
// arguments are the transition event and the OriDomi instance
alert('It seems my folding days are through.');
});
</code>
</pre>
<p>
Keep in mind that arguments are flexible.
The anchor you used last is assumed when leaving out an anchor argument.
OriDomi can usually figure out what you meant:
</p>
<pre>
<code>
folded.ramp(14, function() {
alert('A callback as a second argument...');
});
</code>
</pre>
<h2 id="queueing">Queueing</h2>
<p>
Callbacks are useful, but can become cumbersome when creating
a sequence of animations:
</p>
<pre>
<code>
// a pyramid you can choose to avoid:
folded.curl(50, function() {
folded.collapse(function() {
folded.setSpeed(2000);
folded.stairs(-29, function() {
folded.foldUp(function() {
folded.unfold();
});
});
});
});
</code>
</pre>
<p>
OriDomi features a built-in queueing system that can be used in harmony
with its fluent, chainable interface to easily create sequences:
</p>
<pre>
<code>
// same result as the previous example:
folded.curl(50).collapse().setSpeed(2000).stairs(-29).foldUp().unfold();
</code>
</pre>
<p>
In other words, you can call asynchronous methods synchronously and the
operations will intelligently queue themselves. There&rsquo;s even no need
to chain or make the calls within the same event loop.
</p>
<p>
You can programmatically empty the queue by calling <code>emptyQueue()</code>.
Touch and mouse events also immediately clear queued actions.
</p>
<p>
You can also call <code>wait()</code> with a value of milliseconds to
queue up a delay between actions:
</p>
<pre>
<code>
folded.reveal(20).wait(3000).fracture(-30);
</code>
</pre>
<h2 id="touch">Touch</h2>
<p>
The ability to manipulate a composition with the mouse or by touch is
enabled by default. To create a non-interactive OriDomi composition, pass
this in the initialization options:
</p>
<pre>
<code>
var handsOff = new OriDomi('.sandpaper', { touchEnabled: false });
</code>
</pre>
<p>You can also change it on the fly:</p>
<pre>
<code>
handsOff.enableTouch();
handsOff.disableTouch();
</code>
</pre>
<p>
If you&rsquo;re interested in tracking the user&rsquo;s actions without
dealing with event handlers yourself, you can specify callback functions
in the initialization options:
</p>
<pre>
<code>
var slider = new Oridomi('.slider', {
touchStartCallback: function(startCoordinate, event) {},
touchMoveCallback: function(movementAngle, event) {},
touchEndCallback: function(endCoordinate, event) {}
});
</code>
</pre>
<h2 id="content-manipulation">Content manipulation</h2>
<p>
OriDomi does plenty of DOM manipulation behind the scenes to create what
you see. If you want to change the content or the styling of the
element after it&rsquo;s been modified, OriDomi provides a setter method
to help you out:
</p>
<pre>
<code>
folded.modifyContent(function(el) {
el.querySelector('h1').innerHTML = 'ch-ch-ch-ch-changes... turn and face the strange'
el.style.backgroundColor = '#000';
});
</code>
</pre>
<p>
By passing a function to <code>modifyContent()</code>, you can easily apply
your manipulations on every panel in the composition, with the first argument
referring to an individual panel element. <code>modifyContent()</code> also
passes to the supplied function the anchor (top, left, right, or bottom)
and the panel&rsquo;s index within that anchor (as the second and third
arguments respectively) should you want to make precise and unique manipulations.
</p>
<p>
If you&rsquo;re feeling lazy, you can pass a map of selectors and
manipulation instructions instead:
</p>
<pre>
<code>
folded.modifyContent({
h1: {
content: 'Hello there',
style: {
color: 'green',
textDecoration: 'underline'
}
},
'div > p': 'just some text.',
img: {
style: {
width: '99%'
}
}
});
</code>
</pre>
<h2 id="ripple">Ripple</h2>
<p>
By default, every crease in an OriDomi composition will fold simultaneously.
For a staggered effect, you can enable &ldquo;ripple&rdquo; mode by either
passing <code>ripple: true</code> in the initial options or by calling
<code>setRipple()</code>:
</p>
<pre>
<code>
// staggered, rippling animations:
folded.setRipple().accordion(28).stairs(-40);
// disable ripple:
folded.setRipple(0);
// ripple forwards (default):
folded.setRipple(1);
// ripple backwards:
folded.setRipple(2);
</code>
</pre>
<p>The demos at the top of this page have it enabled.</p>
<h2 id="responsive">Responsive</h2>
<p>
OriDomi compositions adapt to dynamic dimensions just as well as normal
elements. This means that if your OriDomi composition&rsquo;s size is changed
by percentage-based sizing, media queries, CSS transitions, scripting, et
cetera, the panels will resize themselves relative to their parent container.
</p>
<p>
If you resize this site to a small width, you&rsquo;ll see the demos above
change width accordingly.
</p>
<h2 id="custom-sizing">Custom panel sizing</h2>
<p>
If you&rsquo;d like uneven panel sizing, you can pass an array of percentages
in the options instead of a number:
</p>
<pre>
<code>
var simple = new OriDomi('.simple', { vPanels: [10, 10, 10, 70] });
var fibonacci = new OriDomi('.fibonacci',
{
vPanels: [1, 1, 2, 3, 5, 8, 13, 21, 34].map(function(n) {
return n * 1.1363636363636365;
})
}
);
</code>
</pre>
<p>
The only requirement is that the percentages sum to 100 or near it
(for example, <code>[33, 33, 33]</code> is valid).
</p>
<h2 id="custom">Custom behavior</h2>
<p>
And now you&rsquo;ve decided the built-in effects just aren&rsquo;t good
enough for you?
</p>
<p>
Luckily, you can precisely control the folding behavior of every panel by
passing a custom function to the <code>map()</code> method:
</p>
<pre>
<code>
folded.map(function(angle, index, length){ return angle * index * Math.random() })(20);
</code>
</pre>
<p>
In the contrived example above, an anonymous function is passed to
<code>map()</code> that simply multiplies the supplied angle by a given
panel&rsquo;s index and a random float. The function is called for every
panel in the series and may return a different value for each panel based
on the same input value.
</p>
<p>
Since the function you supply is called with the panel index and the set
length, you can create some complex behavior based on evens/odds, angle ranges,
or special behavior based on first/last position. For example, if you wanted
to create a fold-in effect that keeps the first and last panels flat against
the page surface, your function could return different values based on the
index and length arguments supplied to it.
</p>
<h2 id="minutiae">Minuti&aelig;</h2>
<p>
OriDomi requires a modern browser with support for CSS3 transforms,
particularly <code>preserve-3d</code> support. IE 10 and below lack this,
but I&rsquo;m sure you could&rsquo;ve guessed that.
</p>
<p>
You can test for browser support by checking <code>OriDomi.isSupported</code>
at runtime. Initializing an OriDomi instance on an unsupported browser will
return nothing so it&rsquo;s best to use a conditional around your code
dealing with OriDomi.
</p>
<p>
If you have an improvement for OriDomi, by all means
<a href="https://github.com/dmotz/oriDomi">fork and contribute it</a>.
</p>
</section>
<section id="coda">
<h1>Coda</h1>
<p>
I usually tweet about updates and other projects I&rsquo;m working on.
<a href="http://twitter.com/dcmotz">Follow me</a> if that sounds like it
might interest you.
</p>
<p>
For similar open-source projects, take a look at my
<a href="http://oxism.com">personal site</a>.
</p>
<p>And remember, <i>the DOM is your oyster.</i></p>
</section>
<footer>
&infin; <a href="http://oxism.com">oxism.com</a>
</footer>
<script src="oridomi.min.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.