penguin/AstroJS

commit 9d4409c8e0665ad95c83d42be97c56dc4f0e185c

commit 9d4409c8e0665ad95c83d42be97c56dc4f0e185c
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date:   2019-01-19T09:20:30Z

    Better approach utilizing transform & animation frame
---
 botanjs/src/Astro/Mechanism/Parallax.css |  2 +-
 botanjs/src/Astro/Mechanism/Parallax.js  | 60 ++++++++++++++++++++++----------
 2 files changed, 42 insertions(+), 20 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 p = sSupplier.scrollTop/(sSupplier.scrollHeight - sSupplier.clientHeight);
-				cp = 0.85 * cp + p * 0.15;
-				cp = 0.0001 * Math.round( cp * 10000 );
+		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 ) return;
+			if ( pp == cp )
+			{
+				_lock = false;
+				return;
+			}
 
-				for( var i = 0; i < l; i ++ )
+			for( var i = 0; i < l; i ++ )
+			{
+				s = Parallax["s" + i];
+				for( var j = 0, k; j < s.length; j ++ )
 				{
-					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 ) + "%";
-					}
+					k = s[j];
+					k.element.style.transform = "translate(0," + ( -k.verticalRange * ( ( j + 1 ) * cp ) ).toFixed( 2 ) + "%)";
 				}
-
-				pp = cp;
 			}
-			, 15
-		);
+
+			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 );