20/08/18

Tutorial Membuat Efek Tulisan Mengikuti Kursor

Hai semuanya! hari ini aku mau share tutorial lagi! Kali ini tutorialnya adalah "Membuat Efek Tulisan Mengikuti Kursor" . Untuk live previewnya ada di blogku yang ini. Btw, ini juga sempet-sempetin ngepos , padahal banyak tugas dan ulangan. Hadehhh.... Ya udah, langsung aja deh, jangan berlama-lama :').
credit: Neira
caranya:
1. Buka www.blogger.com 
2. Pilih menu Tata letak 
3. Klik Tambahkan Gadget 
4. Pilih yang HTML/Javascript 
5. Copas kode di bawah ini :

<style type='text/css'>#outerCircleText {font-style: italic;font-weight: bold;font-family: &#39;comic sans ms&#39;, verdana, arial;color: #0000FF;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;}</style><script type='text/javascript'>//<![CDATA[;(function(){var msg = "Tulisan yang ingin di tampilkan";var size = 14;var circleY = 0.75; var circleX = 2;var letter_spacing = 5;var diameter = 10;var rotation = 0.2;var speed = 0.3;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-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position},makecircle = function(){ // rotation/positioningif(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 circled = 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 resistancey[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 arraysif(!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>
6. Ganti tulisan warna biru dengan tulisan yang akan kalian tampilkan 
7. Dan setelah itu, save!




Oke, sekian tutorialnya ya! Angel mau menyibukkan diri dengan tumpukan tugas :V . Nyahahahah~ sampai jumpa di lain waktu!!

8 komentar:

1. Jangan gunakan kata-kata kotor atau porno!
2. Jangan mempromosikan barang di komentar!
3. Komentar harus berhubungan dengan pos!

Judulnya Apa Ya?

  CUY!  Kangen ngeblog ah elah, pengen ngaktifin blog ini lagi tapi sy timbang-timbang dlu dah (emote cry), soalnya saya sibuk banget!  buat...