Membuat Cursor Animasi

Teluk Kuantan, Dipagi hari ini minggu hujan membasahi kota Teluk Kuantan, Kota Jalur yang terkenal dengan Pace Jalur Tradisional. gue binggun mau tulis apa ya posting kali ini, tapi kemarin siswa gue ada yang nanya, pak bagaimana cara membuat kursor animasi seperti di Friendster.com dan ada tulisan yang mengikuti kursor mouse pak.

gue sebetulnya agak bingung mau jawabnya, karena membuat kursor dengan di ikuti teks, bagaimana ya menjelaskannya?!! karena untuk membuat teks yang mengikuti kursur membutukan sedikit keahlian dalam pemograman JavaScript, karena untuk membuat kursor kayak gini menggunakan bahasa program javascript dan programnya lumayan panjang.!! seperti yang terlihat disini
<br /><style type="text/css"><br />/* Circle Text Styles */<br />#outerCircleText {<br />/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */<br />font-style: italic;<br />font-weight: bold;<br />font-family: 'comic sans ms', verdana, arial;<br />color: red;<br />/* End Optional */<br /><br />/* Start Required - Do Not Edit */<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 />/* End Required */<br />/* End Circle Text Styles */<br /></style><br /><script type="text/javascript"><br /><br />/* Circling text trail- Tim Tilton<br /> Website: http://www.tempermedia.com/<br /> Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts<br /> Modified Here for more flexibility and modern browser support<br /> Modifications as first seen in http://www.dynamicdrive.com/forums/<br /> username:jscheuer1 - This notice must remain for legal use<br /> */<br /><br /><br />mouse = function(e){<br /> e = e || window.event;<br /> ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position<br /> xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position<br />},<br /><br />makecircle = function(){ // rotation/positioning<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){ // makes the circle<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 /><br />drag = function(){ // makes the resistance<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 />})();<br /><br /></script>

Sorry ini sebagian program untuk membuat teks mengikuti kursor untuk melihat lengkapnya list program klik aja tulisan read more dibawah ... :)

akal punya akal bagaimana cara tidak membuat program tersebut dengan mengetik karena program tersebut terlalu panjang untuk diketik dan di letak di blog, lebih baik gue cari aja di paman google yang serba ada tu apa yang kita cari... heheheh...na akhirnya ketemu juga tu di sebuah situs tentang javascript.

Situs ini membahas tentang program-pragram yang menggunakan javascript, seperti kursor animasi, navigasi, dan lain-lainnya.

dari pada gue tulisan nya tambah lari kemana-mana lebih baik gue buat aja cara membuat kursor animasi yang diikuti oleh teks menggunakan program javasript. gue tulis artikel, agar pembuat blog pemula lebih kreatif dalam membuat blog na dan membagi ilmu yang gue dapat kepada orang lain terutama buat sobat-sobat blogger di dunia dan Indonesia khususnya Kuantan Singingi.

untuk membuat kursor seperti yang terlihat disini.



anda tinggal copy aja list program dibawah ini,

<style type="text/css"><br />/* Circle Text Styles */<br />#outerCircleText {<br />/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */<br />font-style: italic;<br />font-weight: bold;<br />font-family: 'comic sans ms', verdana, arial;<br />color: red;<br />/* End Optional */<br /><br />/* Start Required - Do Not Edit */<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 />/* End Required */<br />/* End Circle Text Styles */<br /></style><br /><script type="text/javascript"><br /><br />/* Circling text trail- Tim Tilton<br /> Website: http://www.tempermedia.com/<br /> Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts<br /> Modified Here for more flexibility and modern browser support<br /> Modifications as first seen in http://www.dynamicdrive.com/forums/<br /> username:jscheuer1 - This notice must remain for legal use<br /> */<br /><br />;(function(){<br /><br />// Your message here (QUOTED STRING)<br />var msg = "Ilmu Informatika...http://jalur-informatika.blogspot.com";<br /><br />/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */<br /><br />// Set font's style size for calculating dimensions<br />// Set to number of desired pixels font size (decimal and negative numbers not allowed)<br />var size = 24;<br /><br />// Set both to 1 for plain circle, set one of them to 2 for oval<br />// Other numbers & decimals can have interesting effects, keep these low (0 to 3)<br />var circleY = 0.75; var circleX = 2;<br /><br />// The larger this divisor, the smaller the spaces between letters<br />// (decimals allowed, not negative numbers)<br />var letter_spacing = 5;<br /><br />// The larger this multiplier, the bigger the circle/oval<br />// (decimals allowed, not negative numbers, some rounding is applied)<br />var diameter = 10;<br /><br />// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)<br />var rotation = 0.4;<br /><br />// This is not the rotation speed, its the reaction speed, keep low!<br />// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)<br />var speed = 0.3;<br /><br />////////////////////// Stop Editing //////////////////////<br /><br />if (!window.addEventListener && !window.attachEvent || !document.createElement) return;<br /><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 /><br />mouse = function(e){<br /> e = e || window.event;<br /> ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position<br /> xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position<br />},<br /><br />makecircle = function(){ // rotation/positioning<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){ // makes the circle<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 /><br />drag = function(){ // makes the resistance<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 /><br />init = function(){ // appends message divs, & sets initial values for positioning arrays<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 /><br />ascroll = function(){<br /> ymouse += window.pageYOffset;<br /> xmouse += window.pageXOffset;<br /> window.removeEventListener('scroll', ascroll, false);<br />};<br /><br />o.id = 'outerCircleText'; o.style.fontSize = size + 'px';<br /><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 />})();<br /><br /></script>

Cari teks yang bertulisan "Ilmu Informatika...http://jalur-informatika.blogspot.com", atau seperti dibawah ini

Your message here (QUOTED STRING)<br />var msg = "Ilmu Informatika...http://jalur-informatika.blogspot.com";<br /><br />/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS

ganti dengan teks yang anda inginkan

lalu anda buka blogger anda. jangan lupa masukan email dan password nya agar bisa mengedit blog anda ...:)
lalu klik tata letak, pada element halaman blog klik tambah gadget dan pilih HTML/JavaScript dan paste aja list program tersebut dan simpan, lalu klik simpan pada element halaman blog. untuk melihat hasilnya anda dapat mengklik lihat blog atau refresh blog anda yang sudah terbuka....

jadi lah anda membust kursor yang diikuti teks... dan selamat mencoba ya, dan giatkan semangat ngeblog dan majukan blogger Indonesia.. salam Blogger..