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

joelrbrandt · Sep 27, 2012 · 52e8257dd41400a3d2222585fe72871125c7ecae · 52e8257
1 parent 6ec63ce
commit 52e8257dd41400a3d2222585fe72871125c7ecae
Unified Split

Showing with 207 additions and 0 deletions.

BIN folder-flat-bottom.png

BIN folder-flat-top.png

+45 −0 index-noshader.html

+162 −0 styles-noshader.css
diff --git a/folder-flat-bottom.png b/folder-flat-bottom.png
diff --git a/folder-flat-top.png b/folder-flat-top.png
diff --git a/index-noshader.html b/index-noshader.html
@@ -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>
diff --git a/styles-noshader.css b/styles-noshader.css
@@ -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