Typing animation text using Javascript - Mostlikers

03 June, 2013

Typing animation text using Javascript


This post makes an create News feed mode animation text basic animation text on marquee text only and using some long jquery so the page will be delay sometimes merge in coding so we need javascript text animation script this mode type using our website top bar watch below demo.





Just call the javascrtipt function code newsText[0] = "some text" output will be show javascript in text area or call <span wrap=virtual></span>



Javascript


 <script language="JavaScript">
 var newsText = new Array();
 newsText[0] = "Enter the text here ";
 newsText[1] = "Enter the text here";
 newsText[2] = "Enter the text here";
 newsText[3] = "Wall Street Hates Facebook. No One Knows Why";
 newsText[4] = "Yelp open to partnering with Facebook on Graph Search - report"
 var ttloop = 1;    // Repeat forever? (1 = True; 0 = False)
 var tspeed = 100;   // Typing speed in milliseconds (larger number = slower)
 var tdelay = 5000; // Time delay between newsTexts in milliseconds

 var dwAText, cnews=0, eline=0, cchar=0, mxText;

function doNews() {
 mxText = newsText.length - 1;
 dwAText = newsText[cnews];
 setTimeout("addChar()",1000)
}
function addNews() {
 cnews += 1;
 if (cnews <= mxText) {
   dwAText = newsText[cnews];
   if (dwAText.length != 0) {
     document.news.news2.value = "";
     eline = 0;
     setTimeout("addChar()",tspeed)
   }
 }
}
function addChar() {
 if (eline!=1) {
   if (cchar != dwAText.length) {
     nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
     document.news.news2.value = nmttxt;
     cchar += 1;
     if (cchar != dwAText.length) document.news.news2.value += "_";
   } else {
     cchar = 0;
     eline = 1;
   }
   if (mxText==cnews && eline!=0 && ttloop!=0) {
     cnews = 0; setTimeout("addNews()",tdelay);
   } else setTimeout("addChar()",tspeed);
 } else {
   setTimeout("addNews()",tdelay)
 }
}

doNews()
</script>


HTML


Sample output function called in textbox wrap=virtual try as span text area etc.


<form name="news">
 <input type="text" name="news2"  wrap=virtual  readonly="readonly" />
</form>