index.html

<!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="https://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="https://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="https://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="https://www.apple.com/safari">Safari</a>, or
    <a href="https://www.firefox.com">Firefox</a>.
  </div>

  <section id="demos">
    <h2>
      Fold the
      <a href="https://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
  shadingIntensity: .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="https://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="https://oxism.com">personal site</a>.
    </p>

    <p>And remember, <i>the DOM is your oyster.</i></p>

  </section>


  <footer>
    &infin; <a href="https://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>