Cara Membuat Tulisan Bergerak Mengikuti Arah Kursor

Memperindah Tampilan Blog

Beberapa waktu lalu aku pernah menulis dan memposting tentang cara mengganti tampilan kursor yang bisa sobat baca DISINI. Sementara kali ini aku akan berbagi trik tentang cara membuat tulisan bergerak mengikuti arah kursor. Ya, dengan trik ini secara otomatis akan membuat tampilan blog terlihat lebih meriah di mana gerakan kursor akan selalu diikuti oleh sebuah tulisan yang selalu bergerak dinamis.

Tulisan yang selalu bergerak dan mengikuti kemana arah kursor bergerak ini, dihasilkan dari sebuah kode script yang akan kita simpan dalam sebuah gadget html. Sobat tidak perlu khawatir karena dengan terpasangnya script ini tidak akan terlalu berpengaruh atau mengganggu kecepatan loading blog sobat. Jadi jika sobat ingin menggunakannya, silahkan baca tata cara pemasangannya kedalam halaman blog, seperti yang tertera di bawah ini.

Cara Membuat Tulisan Bergerak Mengikuti Arah Kursor

1. ‘login’ kedalam dasbor blog sobat

2. Pilih ‘Tata Letak’

3. Pilih ‘tambah gadget’ atau ‘add a gadget’

4. Pilih ‘HTML’

5. ‘Copy’ kode script di bawah ini, lalu simpan atau ‘pastekan’ ke dalam gadget HTML

<style type="text/css">
/* Circle Text Styles */
/*http://www.dynamicdrive.com/dynamicindex13/circletext.htm */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
   Website: http://www.tempermedia.com/
   Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
   Modified Here for more flexibility and modern browser support
   Modifications as first seen in http://www.dynamicdrive.com/forums/
   username:jscheuer1 - This notice must remain for legal use
   */

;(function(){

// Your message here (QUOTED STRING)
var msg = "Selamat Datang di Blog Saya.!";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

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>

Catatan: Silahkan ganti tulisan ‘selamat datang di blog saya’ atau tulisan yang tercetak merah di atas, dengan kata atau kalimat yang sesuai dengan keinginan sobat masing-masing.

6. Terakhir pilih ‘simpan gadget’ dan selesai.

Trik atau cara ini hanya sekedar untuk mempercantik tampilan blog saja, sama halnya dengan mengganti tampilan kursor serta menampilkan salju yang berjatuhan dalam halaman blog. Hanya sekedar untuk mempercantik tampilan blog saja. Dan sebagai demo sobat bisa mengklik tautan demo berikut ini 

–DEMO-

Baiklah, sebagai penutup dari artikel ini aku ucapkan selamat mencoba untuk sobat yang ingin mencoba, dan memasangnya ke dalam halaman blognya masing-masing. Sekian saja trik cara membuat tulisan bergerak mengikuti arah kursor kita jumpa lagi di lain kesempatan serta trik-trik lainnya, Insya Allah. Bye-bye….