Permalink
Browse files

Attempt to do a version with just CSS 3D transforms. Doesn't look right.

  • Loading branch information...
njx committed Sep 27, 2012
1 parent 6ec63ce commit 52e8257dd41400a3d2222585fe72871125c7ecae
Showing with 207 additions and 0 deletions.
  1. BIN folder-flat-bottom.png
  2. BIN folder-flat-top.png
  3. +45 −0 index-noshader.html
  4. +162 −0 styles-noshader.css
View
Binary file not shown.
View
Binary file not shown.
View
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+ <title>Folding mockup</title>
+ <link rel="stylesheet" href="styles-noshader.css"/>
+</head>
+
+<body>
+ <div id="outer"></div>
+ <div id="folder-top"></div>
+ <div id="folder-bottom"></div>
+ <div id="below"></div>
+
+ <div id="tri"></div>
+ <div id="ellipses"></div>
+ <div id="sep"></div>
+
+ <script>
+ var folded = false,
+ tri = document.getElementById("tri"),
+ ellipses = document.getElementById("ellipses"),
+ sep = document.getElementById("sep");
+
+ function handleAnimEnd() {
+ ellipses.style.display = sep.style.display = "block";
+ }
+
+ document.body.onclick = function (e) {
+ document.getElementById("folder-top").className = folded ? "doUnfoldTop" : "doFoldTop";
+ document.getElementById("folder-bottom").className = folded ? "doUnfoldBottom" : "doFoldBottom";
+ document.getElementById("below").className = folded ? "doBelowUnfold" : "doBelowFold";
+ tri.className = folded ? "expand" : "collapse";
+
+ if (folded) {
+ tri.removeEventListener("webkitAnimationEnd", handleAnimEnd);
+ ellipses.style.display = sep.style.display = "none";
+ } else {
+ tri.addEventListener("webkitAnimationEnd", handleAnimEnd);
+ }
+
+ folded = !folded;
+ };
+ </script>
+</body>
+</html>
View
@@ -0,0 +1,162 @@
+body {
+ -webkit-perspective: 1000px;
+}
+
+#outer {
+ position: absolute;
+ background: url(outer-flat.png);
+ left: 0;
+ top: 0;
+ width: 1035px;
+ height: 817px;
+}
+
+#folder-top {
+ position: absolute;
+ background: url(folder-flat-top.png);
+ left: 57px;
+ top: 181px;
+ width: 921px;
+ height: 150px;
+ -webkit-transition: -webkit-transform 2.0s ease-in;
+ -webkit-transform-origin: center top;
+ -webkit-transform: translateZ(0);
+}
+
+#folder-bottom {
+ position: absolute;
+ background: url(folder-flat-bottom.png);
+ left: 57px;
+ top: 331px;
+ width: 921px;
+ height: 151px;
+ -webkit-transition: -webkit-transform 2.0s ease-in;
+ -webkit-transform-origin: center bottom;
+ -webkit-transform: translateZ(0);
+}
+
+#below {
+ position: absolute;
+ background: url(below-flat.png);
+ left: 57px;
+ top: 481px;
+ width: 921px;
+ height: 256px;
+ -webkit-transform: translateZ(0);
+}
+
+#folder-top.doFoldTop {
+ -webkit-transform: rotateX(-90deg);
+}
+
+#folder-top.doUnfoldTop {
+ -webkit-transform: rotateX(0deg);
+}
+
+#folder-bottom.doFoldBottom {
+ -webkit-transform: translateY(-301px) rotateX(90deg);
+}
+
+#folder-bottom.doUnfoldBottom {
+ -webkit-transform: translateY(0px) rotateX(0deg);
+}
+
+
+.doBelowFold {
+ -webkit-animation-duration: 2.0s;
+ -webkit-animation-name: slideUp;
+ -webkit-animation-fill-mode: forwards;
+ -webkit-animation-timing-function: ease-in;
+}
+
+.doBelowUnfold {
+ -webkit-animation-duration: 2.0s;
+ -webkit-animation-name: slideDown;
+ -webkit-animation-fill-mode: forwards;
+ -webkit-animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes slideUp {
+ from {
+ top: 481px;
+ height: 256px;
+ }
+ to {
+ top: 181px;
+ height: 556px;
+ }
+}
+
+@-webkit-keyframes slideDown {
+ from {
+ top: 181px;
+ height: 556px;
+ }
+ to {
+ top: 481px;
+ height: 256px;
+ }
+}
+
+#tri {
+ position: absolute;
+ background: url(expanded.png);
+ left: 115px;
+ top: 165px;
+ width: 16px;
+ height: 16px;
+}
+
+.collapse {
+ -webkit-animation-duration: 2.0s;
+ -webkit-animation-name: collapse;
+ -webkit-animation-fill-mode: forwards;
+ -webkit-animation-timing-function: ease-in;
+}
+
+.expand {
+ -webkit-animation-duration: 2.0s;
+ -webkit-animation-name: expand;
+ -webkit-animation-fill-mode: forwards;
+ -webkit-animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes collapse {
+ from {
+ -webkit-transform: rotateZ(0deg);
+ }
+ to {
+ -webkit-transform: rotateZ(-90deg);
+ }
+}
+
+@-webkit-keyframes expand {
+ from {
+ -webkit-transform: rotateZ(-90deg);
+ }
+ to {
+ -webkit-transform: rotateZ(0deg);
+ }
+}
+
+#ellipses {
+ position: absolute;
+ display: none;
+ background: url(ellipses.png);
+ left: 429px;
+ top: 167px;
+ width: 37px;
+ height: 15px;
+}
+
+#sep {
+ position: absolute;
+ display: none;
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #eee;
+ width: 921px;
+ height: 0px;
+ left: 57px;
+ top: 181px;
+}
+12u

0 comments on commit 52e8257

Please sign in to comment.