Unicorny Wonder

Unicorn.js

	var unicorn = function(){
			var step = 3, // colorChage step, use negative value to change direction
			ms   = 45,  // loop every
			$uni = $('.unicorn'),
			$uni2 = $('.unicorn2'),
			txt  = $uni.text(),
			txt2 = $uni2.text(),
			len  = txt.length,
			len2 = txt2.length,
			lev  = 360/len,
			lev2 = 360/len2,
			newCont = '',
			newCont2 = '',
			itv

			for(var i = 0; i < len; i++){
				newCont += "<span style='color:hsla(" + i*lev + ", 100%, 100%, 1)'>" + txt.charAt(i) + "</span>";
			}

			for(var i = 0; i < len2; i++){
				newCont2 += "<span style='color:hsla(" + i*lev2 + ", 100%, 100%, 1)'>" + txt2.charAt(i) + "</span>";
			}

			$uni.html(newCont); // Replace with new content
			$uni2.html(newCont2);
 			var $ch = $uni.find('span'); // character
			var $ch2 = $uni.find('span');

			function anim(){
				itv = setInterval(function(){
					$ch.each(function(){
						var h = +$(this).attr('style').split(',')[0].split('(')[1]-step % 360;
						$(this).attr({style:"color:hsla("+ h +", 35%, 50%, 1)"});
					});
					$ch2.each(function(){
						var h = +$(this).attr('style').split(',')[0].split('(')[1]-step % 360;
						$(this).attr({style:"color:hsla("+ h +", 35%, 50%, 1)"});
					});
				}, ms);
			}
 			anim();
		}//end unicorny wonder