add animated folding experiment

2011-12-13 12:20:55 +01:00 · 2011-12-13 12:20:55 +01:00 · 5200776c52
commit 5200776c52
parent fcf3b7928f
3 changed files with 364 additions and 0 deletions
--- a/experiments/baisc_animation.html
+++ b/experiments/baisc_animation.html
@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html  xmlns="http://www.w3.org/1999/xhtml">
+    <head profile="http://www.w3.org/2005/10/profile">
+        <title> </title>
+        
+          <style type="text/css" media="screen">
+          
+#container {
+    position: absolute;
+    width: 400px;
+    height: 500px;
+    border: 1px solid black;
+    overflow: hidden;
+}
+
+#top {
+    position: absolute;
+    width: 100%;
+    height: 150px;
+    background: green;
+}
+
+#slide {
+    position: absolute;
+    width: 100%;
+    top: 150px;
+    height: 0;
+    background: orange;
+    overflow: hidden;
+    
+    -webkit-transition: height 5000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
+    
+    -webkit-perspective: 360;
+    -webkit-perspective-origin: 50% 50%;
+}
+
+#slide-top {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    height: 100px;
+    
+    background-color: yellow;
+    /* easeOutSine */
+    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.20) 100%);
+    
+    -webkit-transition: -webkit-transform 5000ms linear;
+    
+    -webkit-transform-style: preserve-3d;
+    -webkit-transform-origin: top;
+    -webkit-transform: rotateX(-90deg);
+}
+
+.visible #slide-top {
+    -webkit-transform: rotateX(0deg);
+}
+
+.visible #slide-bottom {
+    -webkit-transform: rotateX(0deg);
+}
+
+#slide-bottom {
+    position: absolute;
+    width: 100%;
+    top: auto;
+    bottom: 0;
+    height: 200px;
+    z-index: -1;
+    
+    background-color: blue;
+    background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.20) 50%);
+    
+    -webkit-transition: -webkit-transform 5000ms linear;
+    
+    -webkit-transform-style: preserve-3d;
+    -webkit-transform-origin: bottom;
+    -webkit-transform: rotateX(90deg);
+}
+
+#bottom {
+    position: absolute;
+    width: 100%;
+    top: 150px;
+    height: 500px;
+    background: red;
+    /* easeOutSine */
+    -webkit-transition: top 5000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
+}
+          
+          </style>
+    </head>
+    <body>
+
+    <div id="container">
+        <div id="top"></div>
+        <div id="slide">
+            <div id="slide-top"></div>
+            <div id="slide-bottom"></div>
+        </div>
+        <div id="bottom"></div>
+    </div>
+
+    <script>
+
+setTimeout(function() {
+    document.getElementById("bottom").style.top = "350px";
+    document.getElementById("slide").style.height = "200px";
+    document.getElementById("slide").className += " visible";
+    
+}, 1000);
+
+    </script>
+
+    </body>
+</html>