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

0

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 certified Magento 2 expert with more than 10 years of industry-wide experience.

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