Today we are going to see an Interesting jQuery script. Typing Animation script!. Its very simple only 12 lines of code doing this magical animation.
This script Actually asked by one of my blog user, thanks for asking this and made me finding and wrting this stuff.
Here is the typewrite script goes:
$(document).ready(function(){
//get the content
var content = $('.typewrite').html();
//find the length of the content
var contentLength = content.length;
var char = 0;
$('.typewrite').html('<span class="typing-cursor">|</span>');
//Here is the function
(function typeFunc() {
//dynamic delay to get the typewriting feel
var typingSpeed = Math.round(Math.random() * 120) + 60;
setTimeout(function() {
char++;
var type = content.substring(0, char);
$('.typewrite').html(type + '<span class="typing-cursor">|</span>');
//recursive
typeFunc();
}, typingSpeed);
}());
});
Do you want to see how this typewriter script works?. Go to the demo link at the bottom.
Wonder how to use this script?. Just use class=’typewrite’ in any div tag to start the animation.
Here is the example of how to do it. Just copy paste and run this or download at the bottom of this page.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Very Simple jQuery Typing Script - Blog.TheOnlyTutorials.com</title>
<style>
.typewrite{
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 = $('.typewrite').html();
//find the length of the content
var contentLength = content.length;
var char = 0;
$('.typewrite').html('<span class="typing-cursor">|</span>');
//Here is the function
(function typeFunc() {
//dynamic delay to get the typewriting feel
var typingSpeed = Math.round(Math.random() * 120) + 60;
setTimeout(function() {
char++;
var type = content.substring(0, char);
$('.typewrite').html(type + '<span class="typing-cursor">|</span>');
//recursive
typeFunc();
}, typingSpeed);
}());
});
</script>
</head>
<body>
<div id="container">
<!--add typwrite class in any of your div to start the animation -->
<div class="typewrite">
Very Simple jQuery Typing Script from <b>Blog.Theonlytutorials.com</b><br />
Second Line Demo
</div>
</div>
</body>
</html>
