GirlwithBigHead

girlwithbighead

Tutorial : Text Online Header (iv)

01/10/2012 | 4 comments

My own coding, don't re-post.

Preview :

Click here to see live preview

Template Designer : Paste dekat Html/Javascript.

Blogskins : Paste dekat bawah </style> .

<style>
#tittle3 {text-align: center;margin-top:20px;font: normal 60px "candystr";}
@font-face{font-family:candystr;src:url('http://static.tumblr.com/eq1rpir/i3Wm518mw/candystr.ttf')}
</style>
<center>
<script type="text/javascript">
var bgcolour="#ffffff"; 
var fgcolour="#FF94B8"; 
var speed=50; 
var shades=10; 
var bubbcol=new Array();
var bubbler, bubbtxt;
var bubbchr=new Array();
window.onload=function() { if (document.getElementById) {
  for (bubbler=0; bubbler<=shades; bubbler++) {
    bubbtxt="#";
    for (var i=1; i<6; i+=2) {
      var bg=parseInt(bgcolour.substring(i,i+2),16);
      bubbtxt+=dechex(Math.floor(bg+(parseInt(fgcolour.substring(i,i+2),16)-bg)*(bubbler/shades)));
    }
    bubbcol[bubbler+1]=bubbtxt;
  }
  bubbler=document.getElementById("bubble");
  bubbtxt=bubbler.firstChild.nodeValue;
  while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]);
  for (var i=0; i<bubbtxt.length; i++) {
    var bubbi=document.createElement("span");
    bubbi.setAttribute("id", "bubb"+i);
    bubbi.appendChild(document.createTextNode(bubbtxt.charAt(i)));
    bubbler.appendChild(bubbi);
  }
  bubbler=setInterval ("bubbling()", speed);
}}

function dechex(dec) {
  var hex=dec.toString(16);
  if (dec<16) return "0"+hex;
  else return hex;
}

function bubbling() {
  for (var i=0; i<bubbtxt.length; i++) {
    var bubbme=document.getElementById("bubb"+i);
    if (bubbchr[i]) {
      bubbme.style.color=bubbcol[bubbchr[i]];
      bubbchr[i]=(bubbchr[i]+1)%bubbcol.length;
    }
    else if (Math.random()<0.75/bubbchr.length) bubbchr[i]=1;
  }
}
// ]]>
</script>
<div id="tittle3">
<span id="bubble">THIS IS AN EXAMPLE</span></div>
</center>

OLDER NEWER