"Show text letter by letter"
Bootstrap 3.3.0 Snippet by jaikesh yadav

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="text"><span>The intergalactic space agency</span></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
#text { width: 0px; height: 2em; white-space: nowrap; overflow: hidden; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
var spanWidth = $('#text span').width();
$('#text').animate( { width: spanWidth }, 3000 );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Angular
Creating password field text hide show via a single class
Bootstrap Images to Left and Right with Text and Heading
JS Typewriter (Text Animation)

Questions / Comments: