Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

revamped demo

  • Loading branch information...
commit 0fac905d4c1ad9f3dd3886a74220154e7ae5dd86 1 parent 485f147
@dmotz authored
View
634 demo/demo.css
@@ -0,0 +1,634 @@
+* {
+ 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 {
+ background-color: #eee;
+ color: #333;
+ margin: 0 auto;
+ font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, Times, FreeSerif, serif;
+ font-size: 90%;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+ color: #444;
+}
+h2 {
+ text-align: center;
+ margin-bottom: 1rem;
+ font-size: 1.7rem;
+}
+h5 {
+ text-align: center;
+ font-weight: normal;
+ font-size: 1.1rem;
+ font-style: italic;
+}
+header {
+ background-color: #444;
+ border-bottom: 1px #333 solid;
+ border-top: 1px #333 solid;
+ padding: 1rem;
+ padding-bottom: 0;
+ -webkit-perspective: 1000px;
+ -moz-perspective: 1000px;
+ -ms-perspective: 1000px;
+ perspective: 1000px;
+ text-align: center;
+ margin-bottom: 10px;
+}
+header .rotation {
+ -webkit-animation: swivel 12s ease-out;
+ -moz-animation: swivel 12s ease-out;
+ -o-animation: swivel 12s ease-out;
+ -ms-animation: swivel 12s ease-out;
+ animation: swivel 12s ease-out;
+ -webkit-animation-direction: alternate;
+ -moz-animation-direction: alternate;
+ -o-animation-direction: alternate;
+ -ms-animation-direction: alternate;
+ animation-direction: alternate;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ -o-animation-iteration-count: infinite;
+ -ms-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+}
+header > h3 {
+ display: inline-block;
+ font-size: 1rem;
+}
+.menu {
+ left: 10px;
+ width: 120px;
+}
+.menu ul {
+ background-color: #ddd;
+ padding: 10px;
+ list-style: none;
+ -webkit-border-radius: 0 0 5px 5px;
+ border-radius: 0 0 5px 5px;
+}
+.menu ul li {
+ text-align: left;
+}
+.menu ul li a {
+ display: block;
+ text-decoration: none;
+ color: #666;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+ border-bottom: 1px transparent dotted;
+}
+.menu ul li a:hover {
+ color: #333;
+ border-color: #aaa;
+}
+.fold-me,
+.menu {
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+ position: fixed;
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+ top: 0;
+ text-align: left;
+ font-weight: bold;
+ text-shadow: 0 1px 0 rgba(255,255,255,0.7);
+ text-decoration: none;
+ color: #666;
+ font-size: 0.85rem;
+ z-index: 100;
+}
+.fold-me {
+ cursor: pointer;
+ line-height: 1.5;
+ right: 10px;
+}
+.fold-me p {
+ padding: 10px;
+ padding-right: 40px;
+ width: 30px;
+ background-color: #ddd;
+ -webkit-border-radius: 0 0 5px 5px;
+ border-radius: 0 0 5px 5px;
+}
+#tagline {
+ margin-bottom: 30px;
+ text-align: center;
+ position: relative;
+ margin-top: -50px;
+ letter-spacing: -1px;
+ z-index: -1;
+}
+#tagline h1 {
+ background-color: #fff;
+ color: #444;
+ display: inline-block;
+ padding: 0.5rem;
+ padding-bottom: 0.3rem;
+ font-size: 2rem;
+}
+#author {
+ text-align: center;
+ font-style: italic;
+ font-size: 1.1rem;
+ line-height: 3;
+ color: #fff;
+ margin-top: -30px;
+ margin-bottom: 2px;
+}
+#author > a {
+ color: #fff;
+ text-decoration: none;
+}
+#author > a:hover {
+ text-decoration: underline;
+}
+ul {
+ list-style: disc;
+ list-style-position: inside;
+}
+ul > li {
+ text-align: center;
+ line-height: 2;
+}
+.hidden {
+ display: none;
+}
+section {
+ margin-bottom: 50px;
+ float: left;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+}
+section > div {
+ margin: 0 auto;
+ max-width: 700px;
+ padding: 0 1.5rem;
+ text-shadow: 0 1px 0 #fff;
+}
+section p {
+ text-align: center;
+ margin-bottom: 20px;
+}
+pre {
+ background-color: #333;
+ color: #fff;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
+ font-size: 1rem;
+ margin: 0 auto;
+ padding: 10px;
+ margin-bottom: 20px;
+ font-weight: bold;
+ overflow: auto;
+}
+.demo1 {
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+ width: 21.875rem;
+ margin: 0 auto;
+ text-align: center;
+ background-color: #444;
+ color: #fff;
+ padding: 10px 0;
+ border: 20px #eee solid;
+ text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
+ margin-bottom: 40px;
+ background-image: url("./images/1.jpg");
+ -webkit-background-size: 350px;
+ -moz-background-size: 350px;
+ background-size: 350px;
+ -webkit-animation: colors 7s ease-out 5s;
+ -moz-animation: colors 7s ease-out 5s;
+ -o-animation: colors 7s ease-out 5s;
+ -ms-animation: colors 7s ease-out 5s;
+ animation: colors 7s ease-out 5s;
+ -webkit-animation-direction: alternate;
+ -moz-animation-direction: alternate;
+ -o-animation-direction: alternate;
+ -ms-animation-direction: alternate;
+ animation-direction: alternate;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-iteration-count: infinite;
+ -o-animation-iteration-count: infinite;
+ -ms-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+}
+.demo1 > h1 {
+ text-transform: uppercase;
+ letter-spacing: -2px;
+ font-size: 4.375rem;
+ line-height: 2;
+}
+.demo1 > h4 {
+ font-size: 1.875rem;
+ line-height: 0;
+ margin-bottom: 60px;
+}
+h3 {
+ text-align: center;
+ margin-bottom: 20px;
+}
+h3 > a {
+ text-decoration: none;
+ color: #eee;
+ background-color: #666;
+ padding: 0.5rem;
+ padding-bottom: 0.3rem;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ -o-transition: all 0.3s;
+ -ms-transition: all 0.3s;
+ transition: all 0.3s;
+}
+h3 > a:hover {
+ color: #666;
+ background-color: #fff;
+}
+#examples > h2 {
+ margin-bottom: 1rem;
+}
+#examples > h5 {
+ margin-bottom: 1rem;
+}
+#examples > ul {
+ list-style: none;
+}
+#examples > ul > li {
+ display: block;
+ padding-bottom: 1rem;
+}
+#examples > ul > li pre {
+ max-width: 490px;
+ margin-top: 2rem;
+}
+#examples > ul > li:nth-child(even) > article {
+ text-shadow: 0 1px 0 #fff;
+}
+#examples > ul > li:nth-child(odd) {
+ background-color: #444;
+ color: #fff;
+}
+#examples > ul > li:nth-child(odd) > article {
+ padding: 0 1.5rem;
+ text-shadow: 0 -1px 0 #000;
+}
+#examples > ul > li article {
+ margin-bottom: 1.5rem;
+}
+#examples > ul > li h4 {
+ font-size: 1.5rem;
+}
+#examples > ul > li h5 {
+ font-size: 1.1rem;
+ line-height: 1;
+ color: #ccc;
+ margin-bottom: 0.6rem;
+}
+#examples > ul > li span {
+ font-size: 1.1rem;
+ line-height: 1.4;
+}
+.demo {
+ margin: 0 auto;
+}
+.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: #ff676d;
+ background-color: #6ac1ff;
+ padding: 40px 0;
+}
+.demo3 {
+ font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
+ text-transform: uppercase;
+ font-size: 100px;
+ background-color: #444;
+ color: #fff;
+ width: 430px;
+ padding: 10px 15px;
+ background-image: url("./images/3.jpeg");
+ -webkit-background-size: 500px;
+ -moz-background-size: 500px;
+ background-size: 500px;
+ text-align: center;
+}
+.demo4 {
+ width: 300px;
+ height: 200px;
+ background-image: url("./images/4.gif");
+}
+.demo5 {
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+ font-weight: 900;
+ font-style: italic;
+ text-transform: uppercase;
+ font-size: 80px;
+ width: 400px;
+ line-height: 1;
+ text-align: center;
+ background-color: #444;
+ color: #e2bb7c;
+ border: 15px solid #e2bb7c;
+ letter-spacing: -5px;
+ padding: 50px 10px;
+}
+#features {
+ margin-bottom: 2rem;
+}
+#features ul {
+ font-size: 1.2rem;
+ text-align: center;
+}
+#features ul > li {
+ display: inline-block;
+ margin-right: 0 0.4rem;
+ font-size: 1.3rem;
+}
+#features ul > li::before {
+ content: '';
+ margin-right: 8px;
+}
+p {
+ font-size: 1rem;
+}
+#usage p {
+ line-height: 1.8;
+}
+#caveats {
+ font-size: 1rem;
+}
+#caveats > ul {
+ margin: 0 auto;
+}
+#caveats > ul > li {
+ margin-bottom: 2rem;
+}
+#caveats > ul > li > span {
+ color: #666;
+}
+@media screen and (max-width:730px) {
+ .menu {
+ -webkit-transform: translate3d(-200px, 0, 0);
+ -moz-transform: translate3d(-200px, 0, 0);
+ -o-transform: translate3d(-200px, 0, 0);
+ -ms-transform: translate3d(-200px, 0, 0);
+ transform: translate3d(-200px, 0, 0);
+ }
+ .fold-me {
+ -webkit-transform: translate3d(200px, 0, 0);
+ -moz-transform: translate3d(200px, 0, 0);
+ -o-transform: translate3d(200px, 0, 0);
+ -ms-transform: translate3d(200px, 0, 0);
+ transform: translate3d(200px, 0, 0);
+ }
+}
+@-moz-keyframes swivel {
+ 0% {
+ -webkit-transform: rotate3d(0, 1, 0, 20deg);
+ -moz-transform: rotate3d(0, 1, 0, 20deg);
+ -o-transform: rotate3d(0, 1, 0, 20deg);
+ -ms-transform: rotate3d(0, 1, 0, 20deg);
+ transform: rotate3d(0, 1, 0, 20deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate3d(0, 1, 0, -20deg);
+ -moz-transform: rotate3d(0, 1, 0, -20deg);
+ -o-transform: rotate3d(0, 1, 0, -20deg);
+ -ms-transform: rotate3d(0, 1, 0, -20deg);
+ transform: rotate3d(0, 1, 0, -20deg);
+ }
+}
+@-webkit-keyframes swivel {
+ 0% {
+ -webkit-transform: rotate3d(0, 1, 0, 20deg);
+ -moz-transform: rotate3d(0, 1, 0, 20deg);
+ -o-transform: rotate3d(0, 1, 0, 20deg);
+ -ms-transform: rotate3d(0, 1, 0, 20deg);
+ transform: rotate3d(0, 1, 0, 20deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate3d(0, 1, 0, -20deg);
+ -moz-transform: rotate3d(0, 1, 0, -20deg);
+ -o-transform: rotate3d(0, 1, 0, -20deg);
+ -ms-transform: rotate3d(0, 1, 0, -20deg);
+ transform: rotate3d(0, 1, 0, -20deg);
+ }
+}
+@-o-keyframes swivel {
+ 0% {
+ -webkit-transform: rotate3d(0, 1, 0, 20deg);
+ -moz-transform: rotate3d(0, 1, 0, 20deg);
+ -o-transform: rotate3d(0, 1, 0, 20deg);
+ -ms-transform: rotate3d(0, 1, 0, 20deg);
+ transform: rotate3d(0, 1, 0, 20deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate3d(0, 1, 0, -20deg);
+ -moz-transform: rotate3d(0, 1, 0, -20deg);
+ -o-transform: rotate3d(0, 1, 0, -20deg);
+ -ms-transform: rotate3d(0, 1, 0, -20deg);
+ transform: rotate3d(0, 1, 0, -20deg);
+ }
+}
+@-ms-keyframes swivel {
+ 0% {
+ -webkit-transform: rotate3d(0, 1, 0, 20deg);
+ -moz-transform: rotate3d(0, 1, 0, 20deg);
+ -o-transform: rotate3d(0, 1, 0, 20deg);
+ -ms-transform: rotate3d(0, 1, 0, 20deg);
+ transform: rotate3d(0, 1, 0, 20deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate3d(0, 1, 0, -20deg);
+ -moz-transform: rotate3d(0, 1, 0, -20deg);
+ -o-transform: rotate3d(0, 1, 0, -20deg);
+ -ms-transform: rotate3d(0, 1, 0, -20deg);
+ transform: rotate3d(0, 1, 0, -20deg);
+ }
+}
+@keyframes swivel {
+ 0% {
+ -webkit-transform: rotate3d(0, 1, 0, 20deg);
+ -moz-transform: rotate3d(0, 1, 0, 20deg);
+ -o-transform: rotate3d(0, 1, 0, 20deg);
+ -ms-transform: rotate3d(0, 1, 0, 20deg);
+ transform: rotate3d(0, 1, 0, 20deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate3d(0, 1, 0, -20deg);
+ -moz-transform: rotate3d(0, 1, 0, -20deg);
+ -o-transform: rotate3d(0, 1, 0, -20deg);
+ -ms-transform: rotate3d(0, 1, 0, -20deg);
+ transform: rotate3d(0, 1, 0, -20deg);
+ }
+}
+@-moz-keyframes colors {
+ 0% {
+ color: #eee;
+ border-color: #eee;
+ }
+
+ 25% {
+ color: #ff5d2a;
+ border-color: #ff5d2a;
+ }
+
+ 50% {
+ color: #2effc4;
+ border-color: #2effc4;
+ }
+
+ 75% {
+ color: #ff5094;
+ border-color: #ff5094;
+ }
+
+ 100% {
+ color: #111;
+ border-color: #111;
+ }
+}
+@-webkit-keyframes colors {
+ 0% {
+ color: #eee;
+ border-color: #eee;
+ }
+
+ 25% {
+ color: #ff5d2a;
+ border-color: #ff5d2a;
+ }
+
+ 50% {
+ color: #2effc4;
+ border-color: #2effc4;
+ }
+
+ 75% {
+ color: #ff5094;
+ border-color: #ff5094;
+ }
+
+ 100% {
+ color: #111;
+ border-color: #111;
+ }
+}
+@-o-keyframes colors {
+ 0% {
+ color: #eee;
+ border-color: #eee;
+ }
+
+ 25% {
+ color: #ff5d2a;
+ border-color: #ff5d2a;
+ }
+
+ 50% {
+ color: #2effc4;
+ border-color: #2effc4;
+ }
+
+ 75% {
+ color: #ff5094;
+ border-color: #ff5094;
+ }
+
+ 100% {
+ color: #111;
+ border-color: #111;
+ }
+}
+@-ms-keyframes colors {
+ 0% {
+ color: #eee;
+ border-color: #eee;
+ }
+
+ 25% {
+ color: #ff5d2a;
+ border-color: #ff5d2a;
+ }
+
+ 50% {
+ color: #2effc4;
+ border-color: #2effc4;
+ }
+
+ 75% {
+ color: #ff5094;
+ border-color: #ff5094;
+ }
+
+ 100% {
+ color: #111;
+ border-color: #111;
+ }
+}
+@keyframes colors {
+ 0% {
+ color: #eee;
+ border-color: #eee;
+ }
+
+ 25% {
+ color: #ff5d2a;
+ border-color: #ff5d2a;
+ }
+
+ 50% {
+ color: #2effc4;
+ border-color: #2effc4;
+ }
+
+ 75% {
+ color: #ff5094;
+ border-color: #ff5094;
+ }
+
+ 100% {
+ color: #111;
+ border-color: #111;
+ }
+}
View
51 demo/demo.js
@@ -0,0 +1,51 @@
+(function(){
+
+function init(){
+ var demo1 = document.getElementsByClassName('demo1')[0],
+ domi1 = new OriDomi(demo1),
+ demo2 = document.getElementsByClassName('demo2')[0],
+ domi2 = new OriDomi(demo2, { hPanels: 1, vPanels: 3 }),
+ demo3 = document.getElementsByClassName('demo3')[0],
+ domi3 = new OriDomi(demo3, { hPanels: 1, vPanels: 5 }),
+ demo4 = document.getElementsByClassName('demo4')[0],
+ domi4 = new OriDomi(demo4, { hPanels: 1, vPanels: 6, perspective: 500 }),
+ demo5 = document.getElementsByClassName('demo5')[0],
+ domi5 = new OriDomi(demo5, { hPanels: 10, vPanels: 1 }),
+ foldMe = document.querySelector('.fold-me > p'),
+ foldDomi = new OriDomi(foldMe, { vPanels: 1, hPanels: 4, perspective: 200, speed: 500 });
+ //menu = document.getElementsByClassName('menu')[0],
+ //menuDomi = new OriDomi(menu, { vPanels: 1, hPanels: 4, perspective: 200, speed: 500, touchEnabled: false, shadingIntensity: 7 });
+
+ foldMe.addEventListener('mouseover', function(){
+ foldDomi.accordion(-40, 1);
+ }, false);
+
+ foldMe.addEventListener('mouseout', function(){
+ foldDomi.reset();
+ }, false);
+ /*
+ menu.addEventListener('mouseover', function(){
+ menuDomi.accordion(-10, 1);
+ }, false);
+
+ menu.addEventListener('mouseout', function(){
+ menuDomi.reset();
+ }, false);
+ */
+
+ setTimeout(function(){
+ domi1.reveal(40, 1);
+ }, 1000);
+
+ setTimeout(function(){
+ domi2.reveal(40);
+ domi3.stairs(-25, 2);
+ domi4.accordion(-50);
+ domi5.curl(-60, 1);
+ }, 3000);
+
+}
+
+document.addEventListener('DOMContentLoaded', init, false);
+
+})();
View
416 demo/demo.styl
@@ -0,0 +1,416 @@
+@import 'nib'
+
+*
+ 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
+ background-color: #eee
+ color: #333
+ margin: 0 auto
+ font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, Times, FreeSerif, serif
+ font-size: 90%
+ text-rendering: optimizeLegibility
+ -webkit-font-smoothing: antialiased
+ font-smoothing: antialiased
+ color: #444
+
+
+h2
+ text-align: center
+ margin-bottom: 1rem
+ font-size: 1.7rem
+
+
+h5
+ text-align: center
+ font-weight: normal
+ font-size: 1.1rem
+ font-style: italic
+
+
+header
+ background-color: #444
+ border-bottom: 1px #333 solid
+ border-top: 1px #333 solid
+ padding: 1rem
+ padding-bottom: 0
+ perspective: 1000px
+ text-align: center
+ margin-bottom: 10px
+
+ .rotation
+ animation: swivel 12s ease-out
+ animation-direction: alternate
+ animation-iteration-count: infinite
+ transform-style: preserve-3d
+
+ > h3
+ display: inline-block
+ font-size: 1rem
+
+.menu
+ left: 10px
+ width: 120px
+
+ ul
+ background-color: #ddd
+ padding: 10px
+ list-style: none
+ border-radius: 0 0 5px 5px
+
+ li
+ text-align: left
+
+ a
+ display: block
+ text-decoration: none
+ color: #666
+ transition: all .3s
+ border-bottom: 1px transparent dotted
+
+ &:hover
+ color: #333
+ border-color: #aaa
+
+
+.fold-me, .menu
+ transition: all .3s
+ position: fixed
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif
+ top: 0
+ text-align: left
+ font-weight: bold
+ text-shadow: 0 1px 0 rgba(255, 255, 255, .7)
+ text-decoration: none
+ color: #666
+ font-size: 0.85rem
+ z-index: 100
+
+.fold-me
+ cursor: pointer
+ line-height: 1.5
+ right: 10px
+
+
+ p
+ padding: 10px
+ padding-right: 40px
+ width: 30px
+ background-color: #ddd
+ border-radius: 0 0 5px 5px
+
+
+#tagline
+ margin-bottom: 30px
+ text-align: center
+ position: relative
+ margin-top: -50px
+ letter-spacing: -1px
+ z-index: -1
+
+ h1
+ background-color: #fff
+ color: #444
+ display: inline-block
+ padding: 0.5rem
+ padding-bottom: 0.3rem
+ font-size: 2rem
+
+
+#author
+ text-align: center
+ font-style: italic
+ font-size: 1.1rem
+ line-height: 3
+ color: #fff
+ margin-top: -30px
+ margin-bottom: 2px
+
+ > a
+ color: #fff
+ text-decoration: none
+
+ &:hover
+ text-decoration: underline
+
+
+ul
+ list-style: disc
+ list-style-position: inside
+
+ > li
+ text-align: center
+ line-height: 2
+
+
+.hidden
+ display: none
+
+section
+ margin-bottom: 50px
+ float: left
+ box-sizing: border-box
+ width: 100%
+
+ > div
+ margin: 0 auto
+ max-width: 700px
+ padding: 0 1.5rem
+ text-shadow: 0 1px 0 #fff
+
+ p
+ text-align: center
+ margin-bottom: 20px
+
+
+pre
+ background-color: #333
+ color: #fff
+ border-radius: 5px
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .5)
+ font-size: 1rem
+ margin: 0 auto
+ padding: 10px
+ margin-bottom: 20px
+ font-weight: bold
+ overflow: auto
+
+
+.demo1
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif
+ width: 21.875rem
+ margin: 0 auto
+ text-align: center
+ background-color: #444
+ color: #fff
+ padding: 10px 0
+ border: 20px #eee solid
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .1)
+ margin-bottom: 40px
+ background-image: url('./images/1.jpg')
+ background-size: 350px
+ animation: colors 7s ease-out 5s
+ animation-direction: alternate
+ animation-iteration-count: infinite
+
+ > h1
+ text-transform: uppercase
+ letter-spacing: -2px
+ font-size: 4.375rem
+ line-height: 2
+
+ > h4
+ font-size: 1.875rem
+ line-height: 0
+ margin-bottom: 60px
+
+
+h3
+ text-align: center
+ margin-bottom: 20px
+
+ > a
+ text-decoration: none
+ color: #eee
+ background-color: #666
+ padding: 0.5rem
+ padding-bottom: 0.3rem
+ transition: all .3s
+
+ &:hover
+ color: #666
+ background-color: #fff
+
+
+#examples
+ > h2
+ margin-bottom: 1rem
+
+ > h5
+ margin-bottom: 1rem
+
+ > ul
+ list-style: none
+
+ > li
+ display: block
+ padding-bottom: 1rem
+
+ pre
+ max-width: 490px
+ margin-top: 2rem
+
+ &:nth-child(even)
+ > article
+ text-shadow: 0 1px 0 #fff
+
+ &:nth-child(odd)
+ background-color: #444
+ color: #fff
+
+ > article
+ padding: 0 1.5rem
+ text-shadow: 0 -1px 0 #000
+
+ article
+ margin-bottom: 1.5rem
+
+ h4
+ font-size: 1.5rem
+
+ h5
+ font-size: 1.1rem
+ line-height: 1
+ color: #ccc
+ margin-bottom: 0.6rem
+
+ span
+ font-size: 1.1rem
+ line-height: 1.4
+
+
+.demo
+ margin: 0 auto
+
+.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: #ff676d
+ background-color: #6ac1ff
+ padding: 40px 0
+
+
+.demo3
+ font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif
+ text-transform: uppercase
+ font-size: 100px
+ background-color: #444
+ color: #fff
+ width: 430px
+ padding: 10px 15px
+ background-image: url('./images/3.jpeg')
+ background-size: 500px
+ text-align: center
+
+
+.demo4
+ width: 300px
+ height: 200px
+ background-image: url('./images/4.gif')
+
+
+.demo5
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif
+ font-weight: 900
+ font-style: italic
+ text-transform: uppercase
+ font-size: 80px
+ width: 400px
+ line-height: 1
+ text-align: center
+ background-color: #444
+ color: #E2BB7C
+ border: 15px solid #E2BB7C
+ letter-spacing: -5px
+ padding: 50px 10px
+
+
+#features
+ margin-bottom: 2rem
+
+ ul
+ font-size: 1.2rem
+ text-align: center
+
+ > li
+ display: inline-block
+ margin-right: 0 0.4rem
+ font-size: 1.3rem
+
+ &::before
+ content: '•'
+ margin-right: 8px
+p
+ font-size: 1rem
+
+#usage p
+ line-height: 1.8
+
+
+#caveats
+ font-size: 1rem
+ > ul
+ margin: 0 auto
+
+ > li
+ margin-bottom: 2rem
+
+ > span
+ color: #666
+
+
+@keyframes swivel
+ 0%
+ transform: rotate3d(0, 1, 0, 20deg)
+
+ 100%
+ transform: rotate3d(0, 1, 0, -20deg)
+
+
+@keyframes colors
+ 0%
+ color: #eee
+ border-color: #eee
+
+ 25%
+ color: #ff5d2a
+ border-color: #ff5d2a
+
+ 50%
+ color: #2effc4
+ border-color: #2effc4
+
+ 75%
+ color: #ff5094
+ border-color: #ff5094
+
+ 100%
+ color: #111
+ border-color: #111
+
+
+
+@media screen and (max-width:730px)
+ .menu
+ transform: translate3d(-200px, 0, 0)
+
+ .fold-me
+ transform: translate3d(200px, 0, 0)
+
+ //.rotation
+ // animation: none !important
+
View
BIN  demo/images/1.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  demo/images/3.jpeg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  demo/images/4.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
218 index.html
@@ -0,0 +1,218 @@
+<!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.">
+ <meta name="keywords" content="oridomi, origami, javascript, jquery, plugin, library, web, coffeescript, dan motzenbecker">
+ <title>oriDomi - Fold up the DOM like paper.</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">
+</head>
+<body>
+ <div class="menu">
+ <ul>
+ <li><a href="#features">Features</a></li>
+ <li><a href="#examples">Examples</a></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>
+ <h3 id="view-docs"><a href="docs/oriDomi.html">View the 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>
+ <article>
+ <h4>Reveal</h4>
+ <h5>(3 panels)</h5>
+ <span>Keeps the anchor panel flat against the surface of the page.</span>
+ </article>
+ <div class="demo demo2">Late Capitalism</div>
+<pre>
+domi2.reveal(40);
+</pre>
+ </li>
+
+ <li>
+ <article>
+ <h4>Stairs</h4>
+ <h5>(5 panels)</h5>
+ <span>Panels ascend toward or descend away from the viewer.</span>
+ </article>
+ <div class="demo demo3">Delight</div>
+<pre>
+domi3.stairs(-25, 'right');
+</pre>
+ </li>
+
+ <li>
+ <article>
+ <h4>Accordion</h4>
+ <h5>(6 panels)</h5>
+ <span>Compresses the element like the bellows of its namesake.</span>
+ </article>
+ <div class="demo demo4"></div>
+<pre>
+domi4.accordion(-50);
+</pre>
+ </li>
+
+ <li>
+ <article>
+ <h4>Curl</h4>
+ <h5>(10 panels)</h5>
+ <span>An alternative to sharp folds. Looks best with higher panel counts </span>
+ </article>
+ <div class="demo demo5">Tennis Court Oath</div>
+<pre>
+domi5.curl(-60, 'top');
+</pre>
+ </li>
+
+ </ul>
+ </section>
+
+ <br class="clear">
+
+ <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>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>
+$domi.oriDomi('reveal', 44, 1,
+ { callback: function(){ alert('oriDomi'); } });
+</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.</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>
Please sign in to comment.
Something went wrong with that request. Please try again.