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

2
botanjs/src/Astro/Mechanism/Parallax.css
View File

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

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

@ -5,11 +5,22 @@
var Cycle = __import( "System.Cycle" ); var Cycle = __import( "System.Cycle" );
/** @type {Dandelion} */ /** @type {Dandelion} */
var Dand = __import( "Dandelion" ); var Dand = __import( "Dandelion" );
/** @type {Dandelion.IDOMObject} */
var IDOMObject = __import( "Dandelion.IDOMObject" );
var Parallax = { var Parallax = {
totalCSSSlide: 0 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 ) var cssSlide = function( element, slide_index, distance )
{ {
// The concept is drawn in physical book, will make a blog post for this:) // The concept is drawn in physical book, will make a blog post for this:)
@ -66,30 +77,41 @@
var cp = 0; var cp = 0;
var pp = 0; var pp = 0;
Cycle.perma( var _lock = false;
"PARALLAXSCR" var animate = function()
, 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); _lock = false;
cp = 0.85 * cp + p * 0.15; return;
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;
} }
, 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 ); ns[ NS_EXPORT ]( EX_FUNC, "cssSlide", cssSlide );