Typewriting script in jquery
by Mohan[ Edit ] 2014-01-11 19:01:11
Hai,
Here is a simple Typewriter effect script in jquery
<!DOCTYPE html>
<html>
<head>
<script src="http://hscripts.com/jquery.js"></script>
<title>Very Simple jQuery Typing Script</title>
<style>
.typewriter{
font-size: 20px;
}
.typing-cursor{
position: relative;
display: inline-block;
width: 8px;
text-indent: -999em;
background: #ccc;
}
</style>
<script>
$(document).ready(function(){
//get the content
var content = $('.typewriter').html();
//find the length of the content
var contentLength = content.length;
var char = 0;
$('.typewriter').html('<span class="typing-cursor">|</span>');
(function typeFunc() {
var typingSpeed = Math.round(Math.random() * 120) + 60;
setTimeout(function() {
char++;
var type = content.substring(0, char);
$('.typewriter').html(type + '<span class="typing-cursor">|</span>');
typeFunc();
}, typingSpeed);
}());
});
</script>
</head>
<body>
<div id="container">
<div class="typewriter">
</div>
</div>
</body>
</html>