Permalink
Browse files

Go backwards as well as forwards with element flipper.

  • Loading branch information...
1 parent 40e8193 commit 7fb433f7a30399905979b91be97280a6733da1b2 @joseph joseph committed Feb 1, 2012
View
28 test/experimental/moz-element-flipper/index.html
@@ -7,26 +7,32 @@
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
- <body onclick="jump()">
+ <body class="narrow">
<a href="../../index.html" class="backToGuide">&larr; Back to Guide</a>
- <h1><code>-moz-element</code> Flipper test</h1>
+ <h1><code>-moz-element</code> Flipper</h1>
<p>
- Designed for recent versions of Firefox (11+?). A bit stuttery.
+ Designed for recent versions of Firefox (11+?).
Only goes forward.
</p>
- <hr />
+ <hr class="softBreak" />
- <section>
- <div id="imp1" class="imposter"></div>
- <div id="gate">
- <div id="imp2" class="imposter"></div>
- <div id="imp3" class="imposter"></div>
+ <div id="mode">
+ <div id="frame">
+ <section>
+ <div id="imp1" class="imposter"></div>
+ <div id="gate">
+ <div id="imp2" class="imposter"></div>
+ <div id="imp3" class="imposter"></div>
+ </div>
+ <div id="imp4" class="imposter"></div>
+ </section>
</div>
- <div id="imp4" class="imposter"></div>
- </section>
+ </div>
+
+ <hr />
<div class="colCntr">
<div id="origin" class="columns">
View
90 test/experimental/moz-element-flipper/script.js
@@ -1,19 +1,71 @@
-function jump() {
- document.body.className = 'pageTurn';
- setTimeout(nextPage, 420);
-}
-
-function nextPage() {
- document.body.className = '';
- window.pos = (window.pos || 0) + 340;
- setBP(document.getElementById('imp1'), 0)
- setBP(document.getElementById('imp2'), 1)
- setBP(document.getElementById('imp3'), 2)
- setBP(document.getElementById('imp4'), 3)
-}
-
-function setBP(elem, n) {
- var x = n*160+window.pos;
- if (n >= 2) { x += 20; }
- elem.style.backgroundPosition = "-"+x+"px 0px";
-}
+(function () {
+
+ var pos = 0;
+ var parts = {};
+
+
+ function init() {
+ parts.mode = document.getElementById('mode');
+ parts.frame = document.getElementById('frame');
+ parts.imp1 = document.getElementById('imp1');
+ parts.imp2 = document.getElementById('imp2');
+ parts.imp3 = document.getElementById('imp3');
+ parts.imp4 = document.getElementById('imp4');
+
+ parts.imp1.addEventListener('click', reverseJump, false);
+ parts.imp2.addEventListener('click', jump, false);
+ impBPs(0,1,2,3);
+ }
+
+
+ function jump() {
+ parts.mode.className = 'forwardTurn';
+ parts.frame.className = 'pageTurn';
+ setTimeout(nextPage, 620);
+ }
+
+
+ function reverseJump() {
+ parts.mode.className = 'reverseTurn';
+ pos -= 340;
+ impBPs(0,2,1,3);
+ setTimeout(function () {
+ parts.frame.className = 'pageTurn';
+ setTimeout(prevPage, 620);
+ }, 50);
+ }
+
+
+ function nextPage() {
+ parts.frame.className = '';
+ pos += 340;
+ impBPs(0,1,2,3);
+ }
+
+
+ function prevPage() {
+ parts.mode.className = 'forwardTurn';
+ parts.frame.className = '';
+ impBPs(0,1,2,3);
+ }
+
+
+ function impBPs(a,b,c,d) {
+ setBP(parts.imp1, a)
+ setBP(parts.imp2, b)
+ setBP(parts.imp3, c)
+ setBP(parts.imp4, d)
+ }
+
+
+ function setBP(elem, n) {
+ var x = n*160+pos;
+ if (n >= 2) { x += 20; }
+ x = 0 - x;
+ elem.style.backgroundPosition = x+"px 0px";
+ }
+
+
+ window.addEventListener('load', init, false);
+
+})();
View
61 test/experimental/moz-element-flipper/styles.css
@@ -1,5 +1,6 @@
-body {
- padding: 100px;
+hr.softBreak {
+ border: none;
+ border-top: 1px dotted #999;
}
section {
position: relative;
@@ -14,6 +15,7 @@ section {
height: 380px;
}
.colCntr {
+ width: 0;
height: 0;
overflow: hidden;
}
@@ -30,23 +32,18 @@ section {
background-color: #FFF;
}
#imp1 {
- background-position: 0px 0px;
}
#imp2 {
- background-position: -160px 0px;
}
#imp3 {
- background-position: -340px 0px;
- -moz-transform: rotateY(180deg);
+ -moz-transform: rotateY(180deg) translateZ(1px);
}
#imp4 {
- background-position: -500px 0px;
left: 160px;
- opacity: 0.25;
}
#gate {
position: absolute;
- -moz-transform-origin: 1px 50%;
+ -moz-transform-origin: 0% 50%;
-moz-transform-style: preserve-3d;
z-index: 1;
top: 0px;
@@ -55,15 +52,51 @@ section {
height: 382px;
background: #FFF;
}
+
.pageTurn #gate{
- -moz-transition: -moz-transform linear 400ms;
+ -moz-transition: -moz-transform linear 600ms;
-moz-transform: perspective(500px) rotateY(-180deg);
}
-.pageTurn #imp1 {
- -moz-transition: opacity linear 200ms 200ms;
+
+
+.forwardTurn #imp4 {
+ opacity: 0.25;
+}
+
+.forwardTurn .pageTurn #imp1 {
+ -moz-transition: opacity linear 300ms 300ms;
+ opacity: 0.25;
+}
+
+.forwardTurn .pageTurn #imp4 {
+ -moz-transition: opacity linear 300ms;
+ opacity: 1;
+}
+
+
+.reverseTurn #gate {
+ -moz-transform-origin: 100% 50%;
+ left: 0;
+}
+
+.reverseTurn .pageTurn #gate {
+ -moz-transform: perspective(500px) rotateY(180deg);
+}
+
+.reverseTurn #imp1 {
opacity: 0.25;
}
-.pageTurn #imp4 {
- -moz-transition: opacity linear 200ms;
+
+.reverseTurn #imp4 {
opacity: 1;
}
+
+.reverseTurn .pageTurn #imp1 {
+ -moz-transition: opacity linear 300ms;
+ opacity: 1;
+}
+
+.reverseTurn .pageTurn #imp4 {
+ -moz-transition: opacity linear 300ms 300ms;
+ opacity: 0.25;
+}

0 comments on commit 7fb433f

Please sign in to comment.