Code
HTML
<div class="wrapper">
<a class="text">
<span style="transition: .4s .4s;">C</span>
<span style="transition: .4s .6s;">O</span>
<span style="transition: .4s .8s;">D</span>
<span style="transition: .4s 1s;">E</span>
</a>
</div>
<div class="bars-wrapper">
<div class="bar" style="transition: .8s .1s;"></div>
<div class="bar" style="transition: 1s .2s;"></div>
<div class="bar" style="transition: 1.2s .1s;"></div>
<div class="bar" style="transition: .5s;"></div>
<div class="bar" style="transition: .6s;"></div>
<div class="bar" style="transition: 1.4s .1s;"></div>
<div class="bar" style="transition: 1.1s .1s;"></div>
<div class="bar" style="transition: .9s .2s;"></div>
<div class="bar" style="transition: .4s .1s;"></div>
<div class="bar" style="transition: .7s;"></div>
</div>
CSS
body {
font-family: 'Press Start 2P', cursive;
overflow: hidden;
background: white;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text span {
position: relative;
color: #2ecc71;
top: 2000px;
font-size: 8vw;
}
.text span.appear {
top: 0px;
}
.bars-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.bar {
position: relative;
float: left;
width: 10%;
height: 1px;
background: #000;
z-index: -1;
}
.bar.appear {
height: 100%;
}
JAVASCRIPT
setTimeout(function() {
$(".text span").addClass("appear");
}, 500);
setTimeout(function() {
$(".bar").addClass("appear");
}, 2500);
