JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="banner-container content">
	<div class="smarter-container js-font-change">
		<span class="type-text"><span>S</span><span>m</span><span class="js-change-1">a</span><span class="js-change-4">r</span><span>t</span><span class="js-change-3">e</span><span>r</span><span>&nbsp;</span><span>F</span><span class="js-change-2">a</span><span>s</span><span>t</span><span class="js-change-5">e</span><span>r</span><span>.</span>
		</span>
		<span class="dna-text"><span>T</span><span>h</span><span>i</span><span>s</span><span>&nbsp;</span><span>i</span><span>s</span><span>&nbsp;</span><span>o</span><span>u</span><span>r</span><span>&nbsp;</span><span>D</span><span>N</span><span>A</span><span>.</span></span>
	</div>
</div>

CSS

$yellow: #FFE000;
$navy: #111C24;
$white: #FFFFFF;

// Mixins

@mixin animation-delay($start, $end, $delay, $time-adjust){
	@for $item from $start through $end{
		&:nth-child(#{$item}){
			$delay-start: $delay;
			$time: ($item * $time-adjust) + $delay-start;
			animation-delay: $time;
		}
	}
}

@mixin yellow-step($step-number){
	.step-#{$step-number}{
		$prev-step: $step-number - 1;
		.js-change-#{$prev-step}{
			display: none;
		}
		.js-change-#{$step-number}{
			background: $yellow;
		}
	}
}


// Parent Container
.smarter-container{
	//@include font(avenir, black);
	display: block;
	width: rem(890px);
	margin: 0 auto;
	font-size: rem(56px);
	letter-spacing: 0;
	line-height: .8em;
	text-align: left;
}
.smarter-text{
	display: block;
	width: rem(570px);
	margin: rem(70px) auto 0;
	text-align: center;
}
.banner-container{
	margin: rem(130px) auto;
}
// "Smarter Faster." container
.type-text{
	>span{
		display: inline-block;
		opacity: 0;
		//width: 0;
		.step-type-out &{
			animation: typing-characters .2s forwards;
		}
		@include animation-delay(1, 15, 0s, .05);
	}
}
// "This is our DNA" container
.dna-text{
	>span{
		display: inline-block;
		opacity: 0;
		//width: 0;
		padding: 10px 0 10px 1px;
		margin-left: -1px;
		&:first-child{
			padding-left: 10px;
		}
		&:last-child{
			padding-right: 10px;
		}
		.step-type-out &{
			animation: typing-characters .2s forwards;
		}
		@include animation-delay(1, 16, 1s, .05);
	}
}
// Typing Animation
@keyframes typing-characters {
    99% {
			opacity: 0;
			width: 0;
		}
    100% {
			opacity: 1;
			width: auto;
		}
}
// Final Yellow steps
@for $i from 1 through 6{
	@include yellow-step($i);
}
// Step six custom stuff
.step-6{
	.dna-text{
		>span{
			background: $yellow;
		}
		// Transition Delay
		@for $item from 1 through 16{
			$time: $item * .1s;
			>span:nth-child(#{$item}){
				transition-delay: $time;
			}
		}
	}
}

JavaScript

var initBanner = function(){
	var parent = $(".js-font-change");
	var initPos = parent.position().top+100;
	var active = false;
	var browserHeight = $(window).height();
	
    bannerText();
	
	
	function bannerText(){
	  parent.removeClass("step-type-out step-1 step-2 step-3 step-4 step-5 step-6");
	  timer = 0;
	  function parentClass(className, amountTime){
	    setTimeout(function(){
	      parent.addClass(className);
	    }, amountTime);
	  }
	  // Timer type out
	  timer = timer+600;
	  parentClass("step-type-out", timer);
	  // Timer 1
	  timer = timer+2200;
	  parentClass("step-1", timer);
	  // Timer 2
	  timer = timer+800;
	  parentClass("step-2", timer);
	  // Timer 3
	  timer = timer+400;
	  parentClass("step-3", timer);
	  // Timer 4
	  timer = timer+800;
	  parentClass("step-4", timer);
	  // Timer 5
	  timer = timer+600;
	  parentClass("step-5", timer);
	  // Timer 6
	  timer = timer+400;
	  parentClass("step-6", timer);
	  // loop this
	  timer = timer + 4000;
	}
};