demo visual style

williamngan · Oct 27, 2015 · 19dc4ab · 19dc4ab
1 parent 53c838a
commit 19dc4ab
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/demo/css/demoStyles.css b/demo/css/demoStyles.css
@@ -56,7 +56,7 @@ a {
     border-bottom-color: yellow; }
 
 #roll {
-  background: url(../images/nori.png) repeat;
+  background: #5CD;
   position: absolute;
   top: 0;
   left: 0px;
@@ -76,7 +76,7 @@ a {
     width: 100%;
     text-align: right;
     position: absolute;
-    color: #000;
+    color: rgba(0, 0, 0, 0.1);
     line-height: 1;
     letter-spacing: -0.03em; }
 

diff --git a/demo/css/demoStyles.scss b/demo/css/demoStyles.scss
@@ -66,7 +66,7 @@ a {
 
 
 #roll {
-  background: url(../images/nori.png) repeat;
+  background: #5CD;
 
   position: absolute;
   top: 0; left: 0px; bottom: 0; right: 0;
@@ -98,7 +98,7 @@ a {
     width: 100%;
     text-align: right;
     position: absolute;
-    color: #000;
+    color: rgba(0,0,0,.1);
     line-height: 1;
     letter-spacing: -0.03em;
   }

diff --git a/demo/js/demo.js b/demo/js/demo.js
@@ -48,7 +48,8 @@
         for (var i = 0; i < ings.length; i++) {
           var ang1 = parseInt( ings[i].getAttribute( "data-angle" ) );
           var ang2 = parseInt( ings[i].getAttribute( "data-rotate" ) );
-          var tm = "rotate(" + (ang1 + (stepProgress) * ang2 ) + "deg) scale(" + (0.25 + totalProgress * 0.5) + ")";
+          //var tm = "rotate(" + (ang1 + (stepProgress*0.2) * ang2 ) + "deg) scale(" + (0.25 + totalProgress * 0.5) + ")";
+          var tm = "scale(" + (0.25 + totalProgress * 0.5) + ") translate(0, "+Math.floor(-ang1*stepProgress*3)+"px)";
           ings[i].style.transform = tm;
           _vendor( ings[i], "Transform", tm );
         }