penguin/AstroJS
1
0
Fork 0
forked from Botanical/BotanJS
Code Issues Pull Requests Projects Releases Wiki Activity

Better approach utilizing transform & animation frame

Browse Source
This commit is contained in:
斟酌 鵬兄 2019-01-19 17:20:30 +08:00
parent ed2cb2497e
commit 9d4409c8e0
2 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
botanjs/src/Astro/Mechanism/Parallax.js
View File

@ -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,15 +77,18 @@
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 ) return;
if ( pp == cp )
{
_lock = false;
return;
}
for( var i = 0; i < l; i ++ )
{
@ -82,14 +96,22 @@
for( var j = 0, k; j < s.length; j ++ )
{
k = s[j];
k.element.style.top = ( -k.verticalRange * ( ( j + 1 ) * cp ) ).toFixed( 2 ) + "%";
k.element.style.transform = "translate(0," + ( -k.verticalRange * ( ( j + 1 ) * cp ) ).toFixed( 2 ) + "%)";
}
}
pp = cp;
}
, 15
);
EnterFrame( animate );
};
var dispatchAnima = function()
{
if( _lock ) return;
_lock = true;
EnterFrame( animate );
};
IDOMObject( eDispatcher ).addEventListener( "Scroll", dispatchAnima );
};
ns[ NS_EXPORT ]( EX_FUNC, "cssSlide", cssSlide );