Cara Membuat Tulisan Berjalan Mengikuti Mouse

Assalamu'alaikum wr.wb - Ketika masih sekolah dibidang IT, terkadang ada saja tugas dari guru untuk pelatihan dasar blogging, seperti halnya pada judul artikel kali ini Cara membuat tulisan mengikuti cursor.


Cara Membuat Tulisan Mengikuti Cursor


Buka dashboard blogger -> Tema -> Edit HTML dan tambahkan kode dibawah ini tepat sebelum </style>

<style type='text/css'>

#outerCircleText {

font-style: italic;

font-weight: bold;

font-family: &#39;comic sans ms&#39;, verdana, arial;

color: #141414;


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(){

// Isi Text Anda Disini.

var msg = "Isi Text Disini";

var size = "25";

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.2;

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>

Ganti tulisan dan angka yang berwarna merah, sesuai selera anda.

Simpan tema, dan lihat hasilnya.


Nah itulah cara membuat tulisan mengikuti cursor semoga artikel ini bermanfaat, akhir kata wassalamu'alaikum wr.wb


0 Comments

Posting Komentar