Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial commit of gh-page

  • Loading branch information...
commit d86e6b3ed02ee6761029d1ba01761f7e82f8b6ad 0 parents
@dmotz authored
Showing with 570 additions and 0 deletions.
  1. +1 −0  CNAME
  2. +335 −0 demo.css
  3. +80 −0 demo.js
  4. +154 −0 index.html
1  CNAME
@@ -0,0 +1 @@
+oridomi.com
335 demo.css
@@ -0,0 +1,335 @@
+*{
+ margin: 0;
+ padding: 0;
+}
+::-moz-selection {
+ background: #444;
+ color: #fff;
+ text-shadow: none;
+}
+
+::selection {
+ background: #444;
+ color: #fff;
+ text-shadow: none;
+}
+
+.clear{
+ clear: both;
+}
+a{
+ color: #333;
+}
+body{
+ width: 900px;
+ background-color: #fff;
+ color: #333;
+ margin: 0 auto;
+ font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+ padding-top: 20px;
+ position: relative;
+ color: #555;
+
+}
+h2{
+ text-align: center;
+ margin-bottom: 20px;
+ text-decoration: underline;
+}
+h5{
+ text-align: center;
+ font-weight: normal;
+ font-size: 18px;
+ font-style: italic;
+ margin-bottom: 40px;
+}
+
+.fold-me{
+ position: fixed;
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+ top: 0;
+ right: 10px;
+ line-height: 1.5;
+ text-align: left;
+ cursor: pointer;
+ font-weight: bold;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
+ text-decoration: none;
+ color: #666;
+ z-index: 100;
+}
+.fold-me p{
+ padding: 10px;
+ padding-right: 20px;
+ width: 40px;
+ background-color: #ccc;
+ border-radius: 0 0 5px 5px;
+ font-size: 14px;
+}
+#tagline{
+ margin-bottom: 30px;
+ text-align: center;
+ position: relative;
+ margin-top: -80px;
+ font-size: 26px;
+ letter-spacing: -1px;
+ z-index: -1;
+}
+#tagline h1{
+ background-color: #444;
+ color: #fff;
+ display: inline-block;
+ padding: 5px;
+ font-size: 26px;
+}
+#author{
+ text-align: center;
+ font-style: italic;
+ font-size: 15px;
+ line-height: 3;
+ display: block;
+ text-decoration: none;
+ color: #444;
+ cursor: pointer;
+}
+ul > li{
+ text-align: center;
+ line-height: 2;
+}
+ul{
+ list-style: disc;
+ list-style-position: inside;
+}
+.hidden{
+ display: none;
+}
+section{
+ margin-bottom: 50px;
+ float: left;
+ width: 100%;
+}
+section > h2{
+ color: #666;
+}
+section > p{
+ text-align: center;
+ margin-bottom: 20px;
+}
+pre{
+ background-color: #444;
+ color: #fff;
+ border-radius: 5px;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+ font-size: 14px;
+ margin: 0 auto;
+ padding: 0 15px;
+ padding-top: 15px;
+ margin-bottom: 20px;
+ font-weight: bold;
+}
+section > pre{
+ width: 70%;
+}
+.source{
+ width: 360px;
+}
+.source > article{
+ margin-top: 10px;
+}
+.source-link{
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+ background-color: #555;
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+ font-size: 12px;
+ font-weight: bold;
+ padding: 5px;
+ border-radius: 5px;
+ cursor: pointer;
+ position: relative;
+}
+.source-link:active{
+ top: 1px;
+}
+.source label{
+ float: right;
+ font-size: 11px;
+ font-weight: bold;
+ background-color: #ff5a67;
+ color: #fff;
+ padding: 3px;
+ padding-top: 6px;
+ border-radius: 0px;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+ border-top-right-radius: 5px;
+}
+.source pre{
+ border-top-right-radius: 10px;
+
+}
+.demo1{
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+ width: 350px;
+ margin: 0 auto;
+ text-align: center;
+ //background-color: #ff7918;
+ background-color: #444;
+ color: #fff;
+ //color: rgba(255, 255, 255, .8);
+ padding: 10px 0;
+ border: 20px #eee solid;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
+ margin-bottom: 40px;
+ //background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/74/Contre_amiral_Jacques_Philippe_CUVILLIER.JPG');
+ background-image: url('http://upload.wikimedia.org/wikipedia/commons/e/e4/Bismarck_im_Barte_%28Originaltitel%29%2C_1883.jpg');
+ background-size: 350px;
+ cursor: pointer;
+}
+.demo1 > h1{
+ text-transform: uppercase;
+ letter-spacing: -2px;
+ font-size: 70px;
+ line-height: 2;
+}
+.demo1 > h4{
+ font-size: 30px;
+ line-height: 0;
+ margin-bottom: 60px;
+}
+.demo1-source{
+ position: absolute;
+ right: 10px;
+ margin-top: -290px;
+ margin-right: -190px;
+}
+
+#get-source{
+ text-align: center;
+ margin-bottom: 50px;
+}
+#get-source > a{
+ text-decoration: none;
+ color: #fff;
+ background-color: #666;
+ padding: 3px 5px;
+ -webkit-transition: background-color .5s;
+ -moz-transition: background-color .5s;
+ transition: background-color .5s;
+}
+#get-source > a:hover{
+ background-color: #444;
+}
+#examples > div{
+}
+.demo{
+ cursor: pointer;
+}
+.demo2{
+ font-family: "Abril Fatface","Hoefler Text", Constantia, Palatino, Georgia, serif;
+ font-size: 72px;
+ width: 400px;
+ height: 160px;
+ text-align: center;
+ line-height: 1;
+ color: #fff;
+ color: #FF676D;
+ background-color: #6ac1ff;
+ padding: 40px 0;
+ margin-right: 40px;
+ float: left;
+
+}
+
+.demo3{
+ font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
+ text-transform: uppercase;
+ font-size: 100px;
+ background-color: #444;
+ color: #fff;
+ width: 430px;
+ padding: 30px 15px;
+ background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/74/Contre_amiral_Jacques_Philippe_CUVILLIER.JPG');
+ background-size: 500px;
+ text-align: center;
+ float: left;
+}
+
+.demo4{
+ width: 300px;
+ height: 200px;
+ margin-top: 40px;
+ float: left;
+
+ background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/dd/Muybridge_race_horse_animated.gif');
+}
+
+.demo5{
+ font-family: "old standard tt", "Hoefler Text", Constantia, Palatino, Georgia, serif;
+ font-size: 80px;
+ width: 400px;
+ line-height: 1;
+ text-align: center;
+ background-color: #444;
+ color: #E2BB7C;
+ //color: #f8f8f8;
+ float: left;
+ letter-spacing: -3px;
+ text-shadow: 2px 2px 0 #555;
+ //background-color: #40d8ad;
+ padding: 50px 10px;
+ //border: 10px solid #c09d65;
+ //background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d3/Otto_von_Bismarck%2C_Jugendbildnis_im_Alter_von_22_Jahren.jpg');
+ background-size: 400px;
+ float: right;
+ //text-shadow: 0 -1px 0 rgba(0, 0, 0, .2)
+}
+
+#features{
+ margin-bottom: 30px;
+}
+
+#features ul{
+ font-size: 18px;
+ //background-color: #f8f8f8;
+ width: 70%;
+ margin: 0 auto;
+ //padding: 15px 4px;
+ text-shadow: 1px 1px 0 #fff;
+ //background-image: url('pyramid.png');
+ //color: #F8508D;
+ text-align: center;
+}
+#features > ul > li{
+ display: inline-block;
+ margin-right: 35px;
+}
+#features > ul > li::before{
+ content: '';
+ margin-right: 8px;
+}
+
+#usage > p {
+ padding: 0 120px;
+ line-height: 1.8;
+}
+
+
+#caveats > ul{
+ width: 60%;
+ margin: 0 auto;
+
+}
+
+#caveats > ul > li{
+ margin-bottom: 30px;
+}
+
+#caveats > ul > li > span{
+ color: #666;
+ font-size: 14px;
+}
+
80 demo.js
@@ -0,0 +1,80 @@
+//(function(){
+
+
+var $body,
+ $tagline,
+ $foldMe,
+ $demo1,
+ $demo2,
+ $demo3,
+ $demo4,
+ $demo5,
+ methodMap = { demo2: 'reveal', demo3: 'stairs', demo4: 'accordion', demo5: 'curl' };
+
+function randomAngle(){
+ return Math.random() * 60 * (Math.random() > .5 ? -1 : 1);
+}
+
+function init(){
+ $body = $(document.body),
+ $demo1 = $('.demo1').oriDomi(),
+ $foldMe = $('.fold-me > p').oriDomi({ vPanels: 1, hPanels: 4, perspective: 200, speed: 500 }),
+ $demo2 = $('.demo2').oriDomi({ hPanels: 1, vPanels: 3 }),
+ $demo3 = $('.demo3').oriDomi({ hPanels: 1, vPanels: 5 });
+ $demo4 = $('.demo4').oriDomi({ hPanels: 1, vPanels: 4, perspetive: 500 });
+ $demo5 = $('.demo5').oriDomi({ hPanels: 10, vPanels: 1, perspetive: 500 });
+
+ setTimeout(function(){
+ $demo1.click();
+ }, 1000);
+
+ setTimeout(function(){
+ $demo2.oriDomi('reveal', 40);
+ $demo3.oriDomi('stairs', -25, 'r');
+ $demo4.oriDomi('accordion', -50);
+ $demo5.oriDomi('curl', -60, 't');
+ }, 3000);
+
+
+
+
+
+
+ $body.on('click', '.source-link', function(){
+ var $this = $(this);
+ if($this.hasClass('open')){
+ $this.removeClass('open').html('← view source')
+ .parent().find('article').addClass('hidden');
+ }else{
+ $this.addClass('open').html('← hide source')
+ .parent().find('article').removeClass('hidden');
+ }
+ }).on('click', '.demo', function(){
+ var $this = $(this);
+ console.lo
+ $this.oriDomi(methodMap['demo' + $this.attr('data-id')], randomAngle(), $this.attr('data-anchor'));
+ });
+
+ $demo1.on('click', function(){
+ if($demo1.hasClass('scrunched')){
+ $demo1.removeClass('scrunched').oriDomi('reset');
+ }else{
+ $demo1.addClass('scrunched').oriDomi('reveal', 40, 1);
+ }
+ });
+
+ $foldMe.on('mouseover', function(){
+ $foldMe.oriDomi('accordion', -40, 'top');
+
+ }).on('mouseout', function(){
+ $foldMe.oriDomi('reset');
+
+ });
+
+}
+
+
+$(init);
+
+
+//})();
154 index.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="author" content="Dan Motzenbecker">
+ <title>oriDomi - Fold up the DOM like paper.</title>
+ <link href="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 href="http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic" rel="stylesheet" type="text/css">
+</head>
+<body>
+ <a href="https://github.com/dmotz/oridomi" target="_blank" class="fold-me">
+ <p>fold me on Github</p>
+ </a>
+
+ <div class="demo1">
+ <h1>Hello.</h1>
+ <h4>my name is oriDomi.</h4>
+ </div>
+
+ <div class="source demo1-source">
+ <span class="source-link left">&larr; view source</span>
+ <article class="hidden">
+ <label>html</label>
+ <pre>
+&lt;div id="demo1"&gt;
+ &lt;h1>Hello.&lt;/h1&gt;
+ &lt;h4&gt;my name is oriDomi.&lt;/h4&gt;
+&lt;/div&gt;
+ </pre>
+ <label>js</label>
+ <pre>
+$('#demo1').oriDomi('reveal', 40, 'top');
+ </pre>
+ </article>
+ </div>
+
+ <div id="tagline">
+ <h1>Fold up the DOM like paper.</h1>
+ <a href="http://oxism.com" id="author">by Dan Motzenbecker / oxism.com</a>
+ </div>
+
+ <section id="features">
+ <h2>Features</h2>
+ <ul>
+ <li><em>zero</em> dependencies</li>
+ <li>less than 15k</li>
+ <li>optional jQuery/Ender/<em>&c.</em> support</li>
+ <li>works on iOS</li>
+ <li>fold images, webfonts, animated gifs&hellip;</li>
+ </ul>
+ </section>
+
+ <h3 id="get-source"><a href="https://github.com/dmotz/oridomi">Give me the source</a></h3>
+
+ <section id="examples">
+ <h2>Examples</h2>
+ <h5>(click to cycle angle)</h5>
+
+ <div class="demo demo2" data-id="2" data-anchor="l">Late Capitalism</div>
+
+ <div class="demo demo3" data-id="3" data-anchor="r">Delight</div>
+
+ <br class="clear">
+
+ <div class="demo demo4" data-id="4" data-anchor="l"></div>
+
+ <div class="demo demo5" data-id="5" data-anchor="t">Tennis Court Oath</div>
+
+ </section>
+
+ <br class="clear">
+
+ <section id="usage">
+ <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 $myDomi = $('.my-div').oriDomi();
+ </pre>
+
+ <p>or using the standard DOM API:</p>
+
+ <pre>var domi = new OriDomi(document.getElementsByClassName('my-div'));
+ </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 $myDomi = $('.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>$myDomi.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>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 l, r, t, b or 1, 2, 3, 4.</p>
+
+ <pre>$myDomi.oriDomi('reveal', 44, 1,
+ { callback: function(){ alert('oriDomi'); } });
+ </pre>
+
+
+ </section>
+
+
+ <section id="caveats">
+ <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 performance is poor and antialiasing doesn&rsquo;t work well.
+ This should improve soon.</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>
+ </section>
+
+
+ <section id="final">
+ <h2>Final Thoughts</h2>
+ <p><b>oriDomi</b> is brand new, so it likely has plenty of 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 <b><a href="http://chaincalapp.com">ChainCal</a></b>.</p>
+ <p>The DOM is your oyster.</p>
+ </section>
+
+
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+ <script src="https://raw.github.com/dmotz/oriDomi/master/oriDomi.min.js"></script>
+ <script src="demo.js"></script>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.