Latest CSS styling and UI improvements - ready to release!

GavickPro · Sep 7, 2013 · 2dc05c3 · 2dc05c3
1 parent fd93841
commit 2dc05c3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/mod_grid_gk5/scripts/engine.jquery.js b/mod_grid_gk5/scripts/engine.jquery.js
@@ -5,6 +5,7 @@ jQuery(window).load(function(){
 			var animation = el.attr('data-animation');
 			var animation_random = el.attr('data-random');
 			var animation_speed = el.attr('data-speed') == 'normal' ? 500 : (el.attr('data-speed') == 'fast') ? 250 : 750;
+			var animation_divider = el.attr('data-speed') == 'normal' ? 4 : (el.attr('data-speed') == 'fast') ? 2 : 6;
 			var animation_type = el.attr('data-type');
 
 			if(animation === '1') {
@@ -13,7 +14,7 @@ jQuery(window).load(function(){
 				if(animation_random === '0') {
 					// linear
 					for(var i = 0, len = blocks.length; i < len; i++) {
-						gkGridGK5AddClass(jQuery(blocks[i]), 'active', i * (animation_speed / 2.0));
+						gkGridGK5AddClass(jQuery(blocks[i]), 'active', i * (animation_speed / animation_divider));
 					}
 				} else { // or random animation
 					var randomVector = [];
@@ -23,7 +24,7 @@ jQuery(window).load(function(){
 					randomVector = gkGridGK5Shuffle(randomVector);
 					//
 					for(var j = 0, len = blocks.length; j < len; j++) {
-						gkGridGK5AddClass(jQuery(blocks[randomVector[j]]), 'active', j * (animation_speed / 2.0));
+						gkGridGK5AddClass(jQuery(blocks[randomVector[j]]), 'active', j * (animation_speed / animation_divider));
 					}		
 				}
 			}

diff --git a/mod_grid_gk5/scripts/engine.mootools.js b/mod_grid_gk5/scripts/engine.mootools.js
@@ -4,6 +4,7 @@ window.addEvent('load', function(){
 			var animation = el.getProperty('data-animation');
 			var animation_random = el.getProperty('data-random');
 			var animation_speed = el.getProperty('data-speed') == 'normal' ? 500 : (el.getProperty('data-speed') == 'fast') ? 250 : 750;
+			var animation_divider = el.getProperty('data-speed') == 'normal' ? 4 : (el.getProperty('data-speed') == 'fast') ? 2 : 6;
 			var animation_type = el.getProperty('data-type');
 
 			if(animation === '1') {
@@ -12,7 +13,7 @@ window.addEvent('load', function(){
 				if(animation_random === '0') {
 					// linear
 					for(var i = 0, len = blocks.length; i < len; i++) {
-						gkGridGK5AddClass(blocks[i], 'active', i * (animation_speed / 2.0));
+						gkGridGK5AddClass(blocks[i], 'active', i * (animation_speed / animation_divider));
 					}
 				} else { // or random animation
 					var randomVector = [];
@@ -22,7 +23,7 @@ window.addEvent('load', function(){
 					randomVector = gkGridGK5Shuffle(randomVector);
 					//
 					for(var j = 0, len = blocks.length; j < len; j++) {
-						gkGridGK5AddClass(blocks[randomVector[j]], 'active', j * (animation_speed / 2.0));
+						gkGridGK5AddClass(blocks[randomVector[j]], 'active', j * (animation_speed / animation_divider));
 					}		
 				}
 			}

diff --git a/mod_grid_gk5/styles/loader.gif b/mod_grid_gk5/styles/loader.gif
diff --git a/mod_grid_gk5/styles/style.css b/mod_grid_gk5/styles/style.css
@@ -8,9 +8,25 @@
 
 .gkGridGK5 {
 	overflow: hidden;	
+	-webkit-transform: translate3d(0, 0, 0);
+	-moz-transform: translate3d(0, 0, 0);
+	-ms-transform: translate3d(0, 0, 0);
+	-o-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+
+@-moz-document url-prefix() {
+	.gkGridGK5 {
+		-webkit-transform: translate3d(0, 0, 0) scale(1.00001);
+		-moz-transform: translate3d(0, 0, 0) scale(1.00001);
+		-ms-transform: translate3d(0, 0, 0) scale(1.00001);
+		-o-transform: translate3d(0, 0, 0) scale(1.00001);
+		transform: translate3d(0, 0, 0) scale(1.00001);
+	}
 }
 
 .gkGridGK5Wrap {
+	background: url('loader.gif') no-repeat center center;
 	-webkit-perspective: 1200;
 	-moz-perspective: 1200;
 	-ms-perspective: 1200;
@@ -36,11 +52,11 @@
 	-ms-transition-property: all;
 	-o-transition-property: all;
 	transition-property: all;
-	-webkit-transition-timing-function: ease-out;
-	-moz-transition-timing-function: ease-out;
-	-ms-transition-timing-function: ease-out;
-	-o-transition-timing-function: ease-out;
-	transition-timing-function: ease-out;
+	-webkit-transition-timing-function: cubic-bezier(.31,.77,.46,.92) ;
+	-moz-transition-timing-function: cubic-bezier(.31,.77,.46,.92) ;
+	-ms-transition-timing-function: cubic-bezier(.31,.77,.46,.92) ;
+	-o-transition-timing-function: cubic-bezier(.31,.77,.46,.92) ;
+	transition-timing-function: cubic-bezier(.31,.77,.46,.92) ;
 	z-index: 1;
 }
 
@@ -158,3 +174,4 @@
  * Additional styles for modules inside the GK Grid
  */
 
+/* Coming soon */