php - how to create text type writer effect with jQuery/javascript? -


how create text type writer effect jquery /javascript ?

i have tried google,and found jtypewritter, demo page given on jquery plugin jtypewriter not working / opening.

link : http://archive.plugins.jquery.com/project/jtypewriter

project's home page not working.

questions :

  1. how can create text type writer effect jquery or java script ?
  2. is there way have same effects via other tricks ?

i assume text type writer effect, mean 1 in microsoft powerpoint presentation slideshow animations :)

i.e. random colored text appear left right little delay.

you can create own. see (and ugly) demonstration me:

var data="this data shown in effect"; var index=0;  var cursor="<span id='cursor'>_</span>"; $('.content').append(cursor);  function test(){     //clear interval once entire characters processed      if(index>=data.length-1){         clearinterval(t);     }      //generate random color     var hue = 'rgb('             + (math.floor(math.random() * 256)) + ','             + (math.floor(math.random() * 256)) + ','             + (math.floor(math.random() * 256)) + ')';      //wrap each of characters in span tag generated      //random style color.      _span = '<span style="color:'+hue+'">'+data[index]+'</span>';      //and append span before cursor     $('#cursor').before(_span);     index++; }  //call function repeatedly, till characters processed, hence //setinterval(code,duration)  var t=setinterval("test()",200); 

see fiddle

if want increase animation effect, reduce interval in setinterval , vice-versa. also, can make more elegent, prototyping it.

it should give idea.

for restarting. this, instead of clearing interval

if(index>=data.length-1){         $('span').not('#cursor').remove();         index=0; } 

fiddle


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -