Cara Membuat Tulisan Mengikuti Cursor

Langsung saja cara nya :
1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >>

3. Klik Expand Templates Widget,

4. cari kode :  ]]></b:skin>  , lalu tetakkan kode berikut tepat dibawahnya, atau diatas kode : </head>





<style type="text/css">
#outerCircleText{
font-style: italic;
font-weight: normal;
font-family: Comic Sans MS;
color:#ccc;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;
}
#outerCircleText div {
position: relative;
}
#outerCircleText div div {
position: absolute;top: 0;left: 0;text-align: center;
}
</style>

<script type='text/javascript'>
//<![CDATA[

;(function(){

var msg = "Amd001'sBlog";

var size = 24;

var circleY = 0.75; var circleX = 3;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.4;

var speed = 0.3;


if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
 e = e || window.event;
 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
 if(init.nopy){
  o.style.top = (b || document.body).scrollTop + 'px';
  o.style.left = (b || document.body).scrollLeft + 'px';
 };
 currStep -= rotation;
 for (var d, i = n; i > -1; --i){ // makes the circle
  d = document.getElementById('iemsg' + i).style;
  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
 };
},

drag = function(){ // makes the resistance
 y[0] = Y[0] += (ymouse - Y[0]) * speed;
 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
 for (var i = n; i > 0; --i){
  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
  x[i] = X[i] += (x[i-1] - X[i]) * speed;
 };
 makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
 if(!isNaN(window.pageYOffset)){
  ymouse += window.pageYOffset;
  xmouse += window.pageXOffset;
 } else init.nopy = true;
 for (var d, i = n; i > -1; --i){
  d = document.createElement('div'); d.id = 'iemsg' + i;
  d.style.height = d.style.width = a + 'px';
  d.appendChild(document.createTextNode(msg[i]));
  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
 };
 o.appendChild(oi); document.body.appendChild(o);
 setInterval(drag, 25);
},

ascroll = function(){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
 window.addEventListener('load', init, false);
 document.addEventListener('mouseover', mouse, false);
 document.addEventListener('mousemove', mouse, false);
  if (/Apple/.test(navigator.vendor))
   window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
 window.attachEvent('onload', init);
 document.attachEvent('onmousemove', mouse);
};

})();

//]]>
</script>



Ket : untuk Tulisan Amd00'sBlog bisa di ganti sesuai keinginan 
Demikian post tentang Cara Mudah Membuat Tulisan Mengikuti Cursor Unik
Semoga Bermanfaat . . .!! 


Sumber :http://cheater-unib.blogspot.com

0 Response to "Cara Membuat Tulisan Mengikuti Cursor"

Posting Komentar

Welcome In Creating Website

Contoh Sliding Login Dengan JQuery

Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member

Tutorial Blog

Untuk membuatnya Silahkan : Pencet Sini

Member Login

Lost your password?

Not a member yet? Sign Up!