Cara membuat animasi text sederhana (1)

By:
Membuat tampilan blog kita lebih nyentrik dan menarik, dengan memberikan animasi pada text sebagai (title) atau kepala judul. Karena blog kita lebih menarik secara tampilan akan membuat user client yang berkunjung tidak bosen . Munkin sobat blogger mau mencoba berikut langkah-langkahnya :

  1. Anda tentukan terlebih dulu text yang ada akan animasi.
  2. Masukan javascriptnya.
  3. 
    <SCRIPT type="text/javascript">
    //<![CDATA[
            var ie4 = false;
            if(document.all) {
                    ie4 = true; 
            }       
            function setContent(name, value) {
                    var d;  
                    if (ie4) { 
                            d = document.all[name];
                    } else {
                            d = document.getElementById(name);
                    }       
                    d.innerHTML = value;    
            }       
    
     function getContent(name) {
      var d;
                    if (ie4) {
                            d = document.all[name];
                    } else {
                            d = document.getElementById(name);
                    }
                    return d.innerHTML;
     }
    
            function setColor(name, value) {
                    var d;  
                    if (ie4) { 
                            d = document.all[name];
                    } else {
                            d = document.getElementById(name);
                    }
                    d.style.color = value;  
            }
    
     function getColor(name) {
                    var d;
                    if (ie4) {
                            d = document.all[name];
                    } else {
                            d = document.getElementById(name);
                    }
                    return d.style.color;
            }
    
            function animate(name, col) {
      var value = getContent(name);
      if (value.indexOf('<span') >= 0) { return; }
      var length = 0;
                    var str = '';
      var ch;
      var token = '';
      var htmltag = false; 
                    for (i = 0; i < value.length; i++) {
       ch = value.substring(i, i+1);
       if (i < value.length - 1) { nextch = value.substring(i+1, i+2); } else { nextch = ' '; }
       token += ch;
       if (ch == '<' && '/aAbBpPhHiIoOuUlLtT'.indexOf(nextch) >= 0) { htmltag = true; }
       if (ch == '>' && htmltag) { htmltag = false; }
       if (!htmltag && ch.charCodeAt(0) > 30 && ch != ' ' && ch != '\n') {  
                             str += '<span id="' + name + '_' + length + '">' + token + '</span>';
        token = '';
        length++;
       }
                    }
                    setContent(name, str);
                    command = 'animateloop(\'' + name + '\', ' + length + ', 0, 1, \'' + col + '\')';
                    setTimeout(command , 100);
            }
    
            function animateloop(name, length, ind, delta, col) {
      var next = ind + delta;
      if (next >= length) { delta = delta * -1; next = ind + delta; }
      if (next < 0) { delta = delta * -1; next = ind + delta; }
                    setColor(name + '_' + ind, getColor(name + '_' + next));
                    setColor(name + '_' + next, col);
                    command = 'animateloop(\'' + name + '\', ' + length + ', ' + next + ', ' + delta + ', \'' + col + '\')';
                    setTimeout(command , 100);
            }
    //]]>
    </SCRIPT>
    
    
  4. Setelah itu masukan <div> baik id dan class. Tepat dibawah kode javascriptnya :
  5. 
    <DIV id="animate" class="">
     
    <H2><B>Animasi tulisan </B></H2></DIV>
    
    <SCRIPT language="JavaScript">
    animate('animate', '#ff8000');
    </SCRIPT>
    
    







Animasi tulisan


[edit]

Pasang INTERNET FASNET PLUS TV KABEL FIRSTMEDIA
Pasang FIRSTMEDIA internet speed hingga 100mbps + CHannel TV HD hingga 50HD hub 087777313417 only SMS