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/

Surat dari Anak yang di Aborsi

Broo, gue pengen share aja nih. Mungkin bagi loe yang punya fesbuuk note ini udah pernah ke telinga kalian. Jadi ini note berisi cerita tentang dimana sesosok bayi/anak yang telah di aborsi menulis surat kepada ibu yang telah mengarbosi dirinya. Nah, bagi yang pengen ngesex diluar nikah coba loe loe pada baca deh dan hayati!! -- Surat dari Anak yang di ABORSI -- ‎     Assalamu'alaikum warahmatullahi wabarrakatuh Teruntuk Bundaku tersayang... Dear Bunda...     Bagaimana kabar bunda hari ini? Semoga bunda baik-baik saja...nanda juga di sini baik-baik saja bunda... Allah sayang bange...t deh sama nanda. Allah juga yang menyuruh nanda menulis surat ini untuk bunda, sebagai bukti cinta nanda sama bunda.... Bunda, ingin sekali nanda menyapa perempuan yang telah merelakan rahimnya untuk nanda diami walaupun hanya sesaat... Bunda, sebenarnya nanda ingin lebih lama tinggal di rahim bunda, ruang yang kata Allah paling ko

Poster "Anti Mencontek"

Jadi ceritanya sebelum UAS kan dosen pada rajin tuh ngasih tugas ke anak - anaknya dan kali ini gue di suruh ama dosen Komunikasi Grafis buat bikin poster. Tau kan lah yaaaa apa itu poster, tapi poster ini dikasih tema gitu dan temanya adalah "Anti Mencontek"  Seperti biasa kami para penganut SKS kepanjangan dari Sistem Kebut Semalam, berhasil membuat beramai - ramai di kontrakkan. Hasilnya gimana??? Liat aja penampakkannya di bawah....