Better approach utilizing transform & animation frame

botanjs/src/Astro/Mechanism/Parallax.css

@@ -3,4 +3,4 @@
 	width: 100%;
 	height: 100%;
 	top: 0;
-}
+}

botanjs/src/Astro/Mechanism/Parallax.js

@@ -5,11 +5,22 @@
 	var Cycle                   = __import( "System.Cycle" );
 	/** @type {Dandelion} */
 	var Dand                    = __import( "Dandelion" );
+	/** @type {Dandelion.IDOMObject} */
+	var IDOMObject              = __import( "Dandelion.IDOMObject" );
 
 	var Parallax = {
 		totalCSSSlide: 0
 	};
 
+	var EnterFrame = (
+		window.requestAnimationFrame
+		|| window.webkitRequestAnimationFrame
+		|| window.mozRequestAnimationFrame
+		|| window.oRequestAnimationFrame
+		|| window.msRequestAnimationFrame
+		|| function( f ) { window.setTimeout( draw1, 1000 / 60 ); }
+	);
+
 	var cssSlide = function( element, slide_index, distance )
 	{
 		// The concept is drawn in physical book, will make a blog post for this:)
@@ -66,30 +77,41 @@
 
 		var cp = 0;
 		var pp = 0;
-		Cycle.perma(
-			"PARALLAXSCR"
-			, function()
+		var _lock = false;
+		var animate = function()
+		{
+			var p = sSupplier.scrollTop/(sSupplier.scrollHeight - sSupplier.clientHeight);
+			cp = 0.85 * cp + p * 0.15;
+			cp = 0.0001 * Math.round( cp * 10000 );
+
+			if ( pp == cp )
 			{
-				var p = sSupplier.scrollTop/(sSupplier.scrollHeight - sSupplier.clientHeight);
-				cp = 0.85 * cp + p * 0.15;
-				cp = 0.0001 * Math.round( cp * 10000 );
-
-				if ( pp == cp ) return;
-
-				for( var i = 0; i < l; i ++ )
-				{
-					s = Parallax["s" + i];
-					for( var j = 0, k; j < s.length; j ++ )
-					{
-						k = s[j];
-						k.element.style.top = ( -k.verticalRange * ( ( j + 1 ) * cp ) ).toFixed( 2 ) + "%";
-					}
-				}
-
-				pp = cp;
+				_lock = false;
+				return;
 			}
-			, 15
-		);
+
+			for( var i = 0; i < l; i ++ )
+			{
+				s = Parallax["s" + i];
+				for( var j = 0, k; j < s.length; j ++ )
+				{
+					k = s[j];
+					k.element.style.transform = "translate(0," + ( -k.verticalRange * ( ( j + 1 ) * cp ) ).toFixed( 2 ) + "%)";
+				}
+			}
+
+			pp = cp;
+			EnterFrame( animate );
+		};
+
+		var dispatchAnima = function()
+		{
+			if( _lock ) return;
+			_lock = true;
+			EnterFrame( animate );
+		};
+
+		IDOMObject( eDispatcher ).addEventListener( "Scroll", dispatchAnima );
 	};
 
 	ns[ NS_EXPORT ]( EX_FUNC, "cssSlide", cssSlide );