Cara Menambahkan Text Bergerak Mengikuti Cursor

Setelah saya share tentang beberapa trik untuk mempercantik blog, Kali ini saya akan bagi tentang Cara Menambahkan Text Bergerak yang Mengikuti Kursor.

Bagi kalian yang ingin mempercantik tampilan blognya dengan bermacam-macam animasi tidak ada salahnya bila cara ini dicoba siapa tahu kalian nyantol sama animasinya.

1. Login ke keblog kalian
2. Klik rancangan dan tambahkan gadget Java Script/HTML dan
3. Tambahkan script dibawah ini:

 <style type="text/css"><br /> #outerCircleText {<br /> font-weight: bold;<br /> color: red;<br /> position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}<br /> #outerCircleText div {position: relative;}<br /> #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}<br /> </style><br /> <script type="text/javascript"><br /> ;(function(){<br /> var msg = " <span style="color: red;">ISI TEXT DISINI</span> ";<br /> var size = 24;<br /> var circleY = 0.75; var circleX = 2;<br /> var letter_spacing = 5;<br /> var diameter = 10;<br /> var rotation = 0.4;<br /> var speed = 0.4;<br /> if (!window.addEventListener && !window.attachEvent || !document.createElement) return;<br /> msg = msg.split('');<br /> var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,<br /> ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],<br /> o = document.createElement('div'), oi = document.createElement('div'),<br /> b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,<br /> mouse = function(e){<br />  e = e || window.event;<br />  ymouse = !isNaN(e.pageY)? e.pageY : e.clientY;<br />  xmouse = !isNaN(e.pageX)? e.pageX : e.clientX;<br /> },<br /> makecircle = function(){<br />  if(init.nopy){<br />   o.style.top = (b || document.body).scrollTop + 'px';<br />   o.style.left = (b || document.body).scrollLeft + 'px';<br />  };<br />  currStep -= rotation;<br />  for (var d, i = n; i > -1; --i){<br />   d = document.getElementById('iemsg' + i).style;<br />   d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';<br />   d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';<br />  };<br /> },<br /> drag = function(){<br />  y[0] = Y[0] += (ymouse - Y[0]) * speed;<br />  x[0] = X[0] += (xmouse - 20 - X[0]) * speed;<br />  for (var i = n; i > 0; --i){<br />   y[i] = Y[i] += (y[i-1] - Y[i]) * speed;<br />   x[i] = X[i] += (x[i-1] - X[i]) * speed;<br />  };<br />  makecircle();<br /> },<br /> init = function(){<br />  if(!isNaN(window.pageYOffset)){<br />   ymouse += window.pageYOffset;<br />   xmouse += window.pageXOffset;<br />  } else init.nopy = true;<br />  for (var d, i = n; i > -1; --i){<br />   d = document.createElement('div'); d.id = 'iemsg' + i;<br />   d.style.height = d.style.width = a + 'px';<br />   d.appendChild(document.createTextNode(msg[i]));<br />   oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;<br />  };<br />  o.appendChild(oi); document.body.appendChild(o);<br />  setInterval(drag, 25);<br /> },<br /> ascroll = function(){<br />  ymouse += window.pageYOffset;<br />  xmouse += window.pageXOffset;<br />  window.removeEventListener('scroll', ascroll, false);<br /> };<br /> o.id = 'outerCircleText'; o.style.fontSize = size + 'px';<br /> if (window.addEventListener){<br />  window.addEventListener('load', init, false);<br />  document.addEventListener('mouseover', mouse, false);<br />  document.addEventListener('mousemove', mouse, false);<br />   if (/Apple/.test(navigator.vendor))<br />    window.addEventListener('scroll', ascroll, false);<br /> }<br /> else if (window.attachEvent){<br />  window.attachEvent('onload', init);<br />  document.attachEvent('onmousemove', mouse);<br /> };<br /> })();<br /> </script>

4. Ganti TEXT yang saya tandai MERAH, kemudian jangan lupa klik save dan coba lihat hasilnya

Untuk melihat demonya silahkan klik link demo dibawah ini

• Demo

Selamat Mencoba and Happy Blogging.

Efek Collection

Tweet