Skip to main content

Membuat Teks yang Berputar Mengelilingi Cursor

Keliatannya kocak nih, langsung praktek broo!!


Cara Membuat Teks yang Berputar Mengelilingi Cursor
1. Login ke blogger
2. Pilih tata letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:


<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='Membuat Teks yang Berputar Mengelilingi Cursor'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

5. Sebelum disimpan, ganti tulisan Membuat Teks yang Berputar Mengelilingi Cursor dengan teks/tulisan yang kita inginkan.

Comments

Popular posts from this blog

Cara Membuat Scroll Pada Blog Archive

Bagi kalian yang udah ngeblog bertahun - tahun lalu terus di blognya ada widget archivenya, pasti akan muncul sangat panjang kebawah bila di pilih. Nah, dengan ini kita bisa ngebuat scroll pada archive kita. Jadi hemat tempat deh. Bagi yang suka hemat - hemat bisa dicoba lah ini. Kalo demen yang boros - boros yaaaa, buat pengetahuan aja broo :D Moongggooooo.. . . .. . ... Cara Membuat Scroll Pada Blog Archive (Arsip Blog) 1. Login ke Blogger. 2. Di halaman Dasbor, kita pilih Rancangan . 3. Kemudian pilih Edit HTML 4. Beri tanda centang pada Expand Template Widget 5. Cari kode berikut <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'> 6. Kode lengkapnya adalah seperti ini <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/...

Jalan-jalan ke Bali oh sungguh asiknya, bersama kawan kawan, lupakan lara manjakan pikiran, tanpa mengeluarkan uang

Kami para editor TRANS TV batch 16 siap menghibur anda dengan kelucuan kami yang begini adanya. Meskipun kalian tidak meminta, tidak apa-apa. kami paksa Selamat menonton, jangan lupa ambil cemilan, karena durasi lumayan panjang. SIKAAAAATTTTT~

Chapter #2

Hari pertama. Aku jatuh dari ketinggian. Aku masih hidup. Tidak ada darah yang keluar. Semuanya aman. Aku masih terbaring di kasur yang nyaman. Bukan batu karang laut yang tajam. Tangan dan kakiku masih bisa digerakkan. Apa jadinya bila sudah jatuh dari ketinggian seperti itu. Tiga meter saja mungkin aku sudah remuk. Beruntungnya lagi, aku masih bisa merasakan nafas dalam diriku. Hari kedua. Tidak ada yang terjadi. Hanya cerita seperti biasanya. Absurd memang. Tetapi aku menikmatinya.