From 9d4409c8e0665ad95c83d42be97c56dc4f0e185c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=96=9F=E9=85=8C=20=E9=B5=AC=E5=85=84?= <tgckpg@gmail.com>
Date: Sat, 19 Jan 2019 17:20:30 +0800
Subject: [PATCH] Better approach utilizing transform & animation frame

---
 botanjs/src/Astro/Mechanism/Parallax.css |  2 +-
 botanjs/src/Astro/Mechanism/Parallax.js  | 66 ++++++++++++++++--------
 2 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/botanjs/src/Astro/Mechanism/Parallax.css b/botanjs/src/Astro/Mechanism/Parallax.css
index 103e784..0202c19 100644
--- a/botanjs/src/Astro/Mechanism/Parallax.css
+++ b/botanjs/src/Astro/Mechanism/Parallax.css
@@ -3,4 +3,4 @@
 	width: 100%;
 	height: 100%;
 	top: 0;
-}
\ No newline at end of file
+}
diff --git a/botanjs/src/Astro/Mechanism/Parallax.js b/botanjs/src/Astro/Mechanism/Parallax.js
index d6197e3..cbdb64e 100644
--- a/botanjs/src/Astro/Mechanism/Parallax.js
+++ b/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 );