Astro Classes

botanjs/src/Astro/Mechanism/CharacterCloud.css

@@ -0,0 +1,7 @@
+.characterCloud {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+}

botanjs/src/Astro/Mechanism/CharacterCloud.js

@@ -0,0 +1,77 @@
+(function(){
+	var ns = __namespace( "Astro.Mechanism.CharacterCloud" );
+
+	/** @type {Dandelion} */
+	var Dand = __import( "Dandelion" );
+
+	var CharacterCloud = {};
+
+	// Character cloud creates a cloud of character with randomized properties
+	var create = function( ch, char_class, size, cloudRange, charSize )
+	{
+		var cloudMap = Dand.wrapc( "characterCloud" )
+			, charElmt
+			, rx, ry, rs
+			, cs = charSize || 15
+			, l_l = cloudRange.lowerLimit
+			// vertical range
+			, vr = cloudRange.upperLimit - l_l
+			, lf_l = cloudRange.leftLimit
+			// horizontal range
+			, hr = cloudRange.rightLimit
+
+			, charStack = ( ch instanceof Array );
+		;
+
+
+		// The loop is CPU intensive
+		// we need to focus on reducing the CPU usage
+		if( charStack )
+		{
+			var l = ch.length;
+			for(var i = 0; i < size; i ++)
+			{
+				rx = String( lf_l + Math.random()*hr ) + "%";
+				ry = String( l_l + Math.random()*vr ) + "%";
+				rs = Math.random()*cs;
+				charElmt = Dand.wrap('span', null, char_class, ch[Math.floor(Math.random()*l)]);
+
+				var cE_style = charElmt.style;
+
+				cE_style.position = "absolute";
+				cE_style.left = rx;
+				cE_style.top = ry;
+				// cE_style.opacity = Math.random() + "";
+				cE_style.fontSize = rs + "em";
+				cE_style.marginTop = marginLeft = String( -0.5*rs ) + "em";
+
+				cloudMap.appendChild(charElmt);
+			}
+		}
+		else
+		{
+			for(var i = 0; i < size; i ++)
+			{
+				rx = String(lf_l + Math.random()*hr) + "%";
+				ry = String(l_l + Math.random()*vr) + "%";
+				rs = Math.random()*15;
+				charElmt = Dand.wrap('span', null, char_class, ch);
+
+				var cE_style = charElmt.style;
+
+				cE_style.position = "absolute";
+				cE_style.left = rx;
+				cE_style.top = ry;
+				// cE_style.opacity = String(Math.random());
+				cE_style.fontSize = String(rs) + "em";
+				cE_style.marginTop = marginLeft = String( -0.5*rs ) + "em";
+
+				cloudMap.appendChild( charElmt );
+			}
+		}
+		
+		return cloudMap;
+	};
+
+	ns[ NS_EXPORT ]( EX_FUNC, "create", create );
+})();

botanjs/src/Astro/Mechanism/Parallax.css

@@ -0,0 +1,6 @@
+.parallaxCSSSlideLayer {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+}

botanjs/src/Astro/Mechanism/Parallax.js

@@ -0,0 +1,89 @@
+(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 );
+})();