penguin/AstroJS

botanjs/src/Astro/Mechanism/Parallax.js

raw · 2192 bytes

(function(){
	var ns = __namespace( "Astro.Mechanism.Parallax" );

	/** @type {System.Cycle} */
	var Cycle                   = __import( "System.Cycle" );
	/** @type {Dandelion} */
	var Dand                    = __import( "Dandelion" );

	var Parallax = {
		totalCSSSlide: 0
	};

	var cssSlide = function( element, slide_index, distance )
	{
		// The concept is drawn in physical book, will make a blog post for this:)
		var name, s;
		if( !( s = Parallax[ name = "s" + slide_index ] ) )
		{
			s = Parallax[name] = [];
			Parallax.totalCSSSlide ++;
		}
		return (
			s[ s.length ] = {
				element: Dand.wrapc( "parallaxCSSSlideLayer slideTransitionOverride", element )
				// vertical range
				, verticalRange: distance.upperLimit - distance.lowerLimit - 100
				// horizontal range
				, horizontalRange: distance.rightLimit - distance.leftLimit - 100
			}
		).element
		;
	};

	var verticalSlideTo = function( slide_index )
	{
		var s, l = Parallax.totalCSSSlide;
		for( var i = 0; i < l; i ++ )
		{
			if(i <= slide_index)
			{
				s = Parallax["s" + i];
				for( var j = 0, k; j < s.length; j ++ )
				{
					k = s[j];
					k.element.style.top = String(-k.verticalRange*((slide_index + 1))) + "%";
				}
			}
			else break;
		}
	};

	var attach = function ( eDispatcher, sSupplier, opacityModifier )
	{
		var opacityModifier = ( opacityModifier == undefined ) ? 1 : opacityModifier + 0;
		var s, l = Parallax.totalCSSSlide;

		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.opacity = ( ( 0.35 + 0.55 * i / l ) * opacityModifier ) + "";
			}
		}

		Cycle.perma(
			"PARALLAXSCR"
			, function()
			{
				var p = sSupplier.scrollTop/(sSupplier.scrollHeight - sSupplier.clientHeight);
				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 = String(-k.verticalRange*((j + 1)*p)) + "%";
					}
				}
			}
			, 15
		);
	};

	ns[ NS_EXPORT ]( EX_FUNC, "cssSlide", cssSlide );
	ns[ NS_EXPORT ]( EX_FUNC, "verticalSlideTo", verticalSlideTo );
	ns[ NS_EXPORT ]( EX_FUNC, "attach", attach );
})();