Cursor Animasi Naga Terbang

Panduan serial tentang berbagai cursor animasi yang dapat digunakan di BloGGeR. 

Cursor Animasi Naga Terbang adalah sebuah cursor yang dibangun menggunakan javascript untuk membuat animasi teks yang dapat di isi dengan identitas blogger atau kata-kata yang lain. Sangat menarik karena kompatibel dengan semua browser yang ada dan selaman ini menjadi browser terpopuler di Indonesia, seperti Opera, Mozzila dan Internet Explorer.

Teks animasi pada cursor animasi Naga Terbang didesain membentuk sebuah lingkaran seperti layaknya bumi yang berputar mengelilingi semesta. Saat cursor digerakkan maka teks akan bergerak mengikuti gerak mouse laksana naga yang sedang terbang dengan penuh keanggunan layaknya penari Bali yang sedang menggeliat menarikan Pendet dan Legong, atau seperti prawan Jawa sedang menarikan Serimpi. Sinaga Terbang pun akan  berdiam diri dengan mengangguk-angguk sambil berputar-putar mengitari ujung cursor, ketika jemari menghentikan gerak si cursor naga terbang.   Sangat indah dan pastinya sangat menarik untuk coba digunakan di blog sebagai penambah keindahan.

Cara membuat dan memasang Cursor Animasi Naga Terbang:

1. Login : Login ke BloGGer dan lanjutkan KLIK “Tata Letak” (masuk Elemen Laman), kemudian KLIK “Tambah Gadget”.
2. HTML/Javascript : KLIK untuk menambahkan widget baru (cursor Animasi Naga Terbang).
3. Copy paste Kode CSS dan Javascript berikut dalam box widget (HTML/Javascript) yang tersedia.Ganti nama saya dengan tulisan yang anda inginkan,selamat mencoba

<style type="text/css">
/* http://gubhugreyot.blogdetik.com */
#outerCircleText {
        font-weight: bold;
        font-family: cursive;
        color: #0000cc;
        position:absolute;
        top:0;
        left:0;
        z-index:99999;
}
#outerCircleText div {
        position: relative;
}
#outerCircleText div div {
        position: absolute;
        top:0;
        left:0;
        text-align:center;
}
</style>
<script type="text/javascript">
/* http://edi aswanto - cursor animasi Naga-Terbang */
;(function(){ var msg = "*edi aswanto*";
var size = 18; var circleY = 0.7; var circleX = 2; var letter_spacing = 5;
var diameter = 14; var rotation = 0.2; var speed = 0.5; 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;
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX;}, makecircle = function(){ 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){ 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(){ 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(){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>

Panduan BloGGeR Special Cursor ini merupakan posting serial tentang berbagai cursor animasi yang dapat digunakan di BloGGeR. Cursor Animasi Naga Terbang adalah sebuah cursor yang dibangun menggunakan javascript untuk membuat animasi teks yang dapat di isi dengan identitas blogger atau kata-kata yang lain. Sangat menarik karena kompatibel dengan semua browser yang ada dan selaman ini menjadi browser terpopuler di Indonesia, seperti Opera, Mozzila dan Internet Explorer.

Teks animasi pada cursor animasi Naga Terbang didesain membentuk sebuah lingkaran seperti layaknya bumi yang berputar mengelilingi semesta. Saat cursor digerakkan maka teks akan bergerak mengikuti gerak mouse laksana naga yang sedang terbang dengan penuh keanggunan layaknya penari Bali yang sedang menggeliat menarikan Pendet dan Legong, atau seperti prawan Jawa sedang menarikan Serimpi. Sinaga Terbang pun akan  berdiam diri dengan mengangguk-angguk sambil berputar-putar mengitari ujung cursor, ketika jemari menghentikan gerak si cursor naga terbang.   Sangat indah dan pastinya sangat menarik untuk coba digunakan di blog sebagai penambah keindahan.

trims buat http://gubhugreyot.blogdetik.com