Typewriting script in jquery

by Mohan 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>

630
like
0
dislike
0
mail
flag

You must LOGIN to add comments