Cool Typing Effect, Eraser Effect and a Blinking Cursor using jQuery

These days I am tying to play with .animate() function of jQuery. Believe me, this function has been gifted with immense powers. While browsing the web, I found an interesring text effect using jQuery, written on Burnmind. This effect will catch your eyes, I bet. And thanks to Burnmind for providing such a cool tutorial.




Live Demo Download Script

jQuery Code

var captionLength = 0;
var caption = "";

$(document).ready(function()
{
setInterval ( "cursorAnimation()", 600 );
});

function testTypingEffect()
{
caption = $("input#userCaption").val();
type();
}

function type()
{
$('p.caption').html(caption.substr(0, captionLength++));
if(captionLength < caption.length+1)
{
setTimeout("type()", 50);
}
else
{
captionLength = 0;
caption = "";
}
}

function testErasingEffect()
{
caption = $("p.caption").html();
captionLength = caption.length;
if (captionLength>0)
{
erase();
}
else
{
$('p.caption').html("You didn't write anything to erase, but ok!");
setTimeout("testErasingEffect()", 1000);
}
}

function erase()
{
$('p.caption').html(caption.substr(0, captionLength--));
if(captionLength >= 0)
{
setTimeout("erase()", 50);
}
else {
captionLength = 0;
caption = "";
}
}

function cursorAnimation()
{
$("p.cursor").animate(
{
opacity: 0
}, "fast", "swing").animate(
{
opacity: 1
}, "fast", "swing");
}

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebSpeaks.in</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="functions.js"> </script>
</head>

<body>
<div id="form">
<input type="text" id="userCaption" value="Type something here!" />
<input type="submit" name="submit" value="Test Typing Effect" onclick="testTypingEffect()"/>
<input type="submit" name="submit" value="Test Erasing Effect" onclick="testErasingEffect()"/>
</div>
<div id="effectTesting">
<p>C:</p><p class="caption"></p><p class="cursor">|</p>
</div>
<p class="testing"></p>
</body>
</html>

CSS Code

body 
{
font-family: Verdana, Arial, Georgia, Sans-serif;
font-size: 18px;
color: #e3e3e3;
background: #000000;
}

#effectTesting p
{
float: left;
}

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/