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.

Read More

Membuat Efek Tulisan Dengan Css Text Shadow

Membuat efek teks bayangan sebenarnya tidaklah begitu sulit untuk dilakukan, karena untuk menciptakan efeknya, Anda cukup bermain dengan CSS TEXT SHADOW, semua pengaturan untuk membuat efek teks dengan berbagai model dan warna, anda cukup mengatur nilai value dari kode text shadow, sehingga offset sumbu (y) dan (x) dapat kita bentuk dan kita sesuaikan dengan keinginan.



Berbagai koleksi pilihan Efek Teks Bayangan Dengan CSS Text Shadow yang dapat anda jadikan sebagai referensi buat model Judul blog anda terlihat semakin menarik dan keren, seperti di bawah ini :

• Efek Text Garis Sisi

Untuk melihat kodenya silahkan klik tab HTML, CSS, JS/JavaScript di bawah ini :

• Efek Text Tiga Dimensi

• Efek Text Menyala

• Efek Text Pelangi

• Efek Text Emboss

• Efek Text Bayangan

Selamat Berkreasi...!

Read More