Permalink
Browse files

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

  • Loading branch information...
1 parent 6ec63ce commit 52e8257dd41400a3d2222585fe72871125c7ecae @njx committed Sep 27, 2012
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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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.