<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.writer{
font-size: 30px;
color: red;
font-weight: bold;
font-family: verdana;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="container">
<div class="writer">Hi! My name is MaHiii. Welcome to CSS Tution.</div>
</div>
</body>
<script type="text/javascript">
var $el = $('.writer'),
txt = $el.text(),
txtLen = txt.length,
timeOut,
char = 0;
$el.text('|');
(function typeIt() {
var humanize = Math.round(Math.random() * (200 - 30)) + 30;
timeOut = setTimeout(function() {
char++;
var type = txt.substring(0, char);
$el.text(type + '|');
typeIt();
if (char == txtLen) {
$el.text($el.text().slice(0, -1)); // remove the '|'
clearTimeout(timeOut);
}
}, humanize);
}());
</script>
</html>
Output :)
1)
2)
3)
<html>
<head>
<style type="text/css">
.writer{
font-size: 30px;
color: red;
font-weight: bold;
font-family: verdana;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="container">
<div class="writer">Hi! My name is MaHiii. Welcome to CSS Tution.</div>
</div>
</body>
<script type="text/javascript">
var $el = $('.writer'),
txt = $el.text(),
txtLen = txt.length,
timeOut,
char = 0;
$el.text('|');
(function typeIt() {
var humanize = Math.round(Math.random() * (200 - 30)) + 30;
timeOut = setTimeout(function() {
char++;
var type = txt.substring(0, char);
$el.text(type + '|');
typeIt();
if (char == txtLen) {
$el.text($el.text().slice(0, -1)); // remove the '|'
clearTimeout(timeOut);
}
}, humanize);
}());
</script>
</html>
Output :)
1)
2)
3)
No comments:
Post a Comment