jQuery animated typing text
HTML
<div class="text">
<div class="content"></div>
<div class="dash"></div>
</div>
CSS
body{
font-family: serif;
color: #333;
}
.text{
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
font-size: 30px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.text .content{
display: inline;
}
.text .dash{
display: inline-block;
height: 3px;
width: 20px;
background-color: #66ccff;
animation: blink .5s infinite linear;
}
@keyframes blink{
0%{
opacity: 1;
}
99%{
opacity: 0;
}
100%{
opacity: 1;
}
}
JAVASCRIPT
(function(){
var app;
$(document).ready(function(){
return app.init();
});
app = {
text: "Hello World. Welcome to codepad.co",
index: 0,
chars: 0,
speed: 100,
container: '.text .content',
init: function(){
this.chars = this.text.length;
return this.write();
},
write: function(){
$(this.container).append(this.text[this.index]);
if(this.index<this.chars){
this.index++;
return window.setTimeout(function(){
return app.write();
}, this.speed);
}
}
};
}.call(this));
