Animated text tagline

animation for system 2

by vincentieo

HTML

<script src="http://code.jquery.com/color/jquery.color.min.js"></script>
<div class="tagLine">
			
			<p>
				DUNTUTLABOREETDOLOREMAGNAALIQUA TENIMADMINIMVENIAMQUISNOSTR UDEXERCIT 
				<br>ATIONULLAMCOLABORISNISIUTALIQUIPEXEACOMMODOCONSEQUATUISAUTEI RUREDOLOR 
				<br>INRE<span class="first">TO</span>P<span class="first">GET</span>R<span class="first">THE</span>E<span class="first">REAL</span>H<span class="first">PICTURE</span>E<span class="first">YOU</span>N<span class="first">NEED</span>D<span class="first">THE</span>E<span class="first">RIGHT</span>R<span class="first">PRESENTATION</span>IT INVOLUPTAT 
				<br>EVELITE<span class="fourth">GETTING</span>S<span class="fourth">MEANING</span>S<span class="fourth">OUT</span>E<span class="fourth">OF</span>C<span class="fourth">DATA</span>R<span class="fourth">IS</span>L<span class="fourth">WHAT</span>L<span class="fourth">WE</span>U<span class="fourth">DO</span>MDOLOREEUFUGIAFPITNU
				<br>OREMIPSUMDOLORSITAMETCONSECTETURADIPISICINGELITSEDDOEIUSMODTE MPORINCID 
				<br>EURSIN<span class="second">AND</span>T<span class="second">THE</span>O<span class="second">MORE</span>C<span class="second">YOU</span>C<span class="second">LOOK</span>A<span class="second">THE</span>E<span class="second">MORE</span>C<span class="second">YOU</span>A<span class="second">SEE</span>TCUPIDATATNONPROIDENTUN 
				<br>INVOLUP<span class="fourth">CALL</span>T<span class="fourth">US</span>A<span class="fourth">TODAY</span>T<span class="fourth">AND</span>X<span class="fourth">FIND</span>E<span class="fourth">OUT</span>V<span span class="fourth">HOW</span>E<span class="fourth">WE</span>L<span class="fourth">CAN</span>P<span class="fourth">HELP</span>TYOUESSECIUMDOUMD
				<br>TUTLABOREETDOLOREMAGNAALIQUA TENIMADMINIMVENIAMQUISNOSTRUDE XERCITATIO 
				<br>NULLAMC<span class="third">ARE</span>O<span class="third">YOU</span>L<span class="third">GETTING</span>A<span class="third">THE</span>B<span class="third">FULL</span>O<span...

CSS

body{
	font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
}

.tagLine p {
	color: #808080;
	display:none;
}

JavaScript

$(document).ready(function() {

//color vars
var highlight = "#536579";
var background = "#d9d9d9";
var transition = 400;

//defin animation
	function tagAnimation(){
		$('.tagLine p').fadeIn('slow');

		// clear color from spans
			$('.tagLine p span').animate({
				"color": background,
			}, transition);
		
		function first(){
			//lighten background
			$('.tagLine p').animate({
				"color": background,
			}, transition);

			//color first span
			$('.tagLine .first').animate({
				"color": highlight,
			}, transition);
		};

		function second(){
			
			$('.tagLine .first').animate({
				"color": background,
			}, transition);

			$('.tagLine .second').animate({
				"color": highlight,
			}, transition);
		};

		function third(){

			$('.tagLine .second').animate({
				"color": background,
			}, transition);
			
			$('.tagLine .third').animate({
				"color": highlight,
			}, transition);
		};

		function fourth(){

			$('.tagLine .third').animate({
				"color": background,
			}, transition);
			$('.tagLine .fourth').animate({
				"color": highlight,
			}, transition);

			setTimeout(tagAnimation, 6000);
		};


		setTimeout(first, 800);
		setTimeout(second, 6000);
		setTimeout(third, 12000);
		setTimeout(fourth, 18000);

	};

//call animation
	setTimeout(tagAnimation,800);


// end jquery block
});