Info

SELAMAT DATANG

Selamat datang di Coretan Evanzip - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini semoga dari sekian banyak postingan ada beberapa artikel yang bermanfaat buat anda

Sekilas Tentang Evanzip


Nama saya Evan Saputra, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...

Posts Subscribe to This BlogComments

Follow Us


Selasa, 08 November 2011

Cara Membuat kursor mouse Diikuti Teks


Cara Membuat kursor mouse Diikuti Teks

Halo Sobat evanzip Masih setiakan nongkrong di sini....:D,kali ini evanzip mau berbagi trik cara membuat kursor mouse di ikuti teks kemana saja mouse itu di gerakkan.kalau sobat gerakkan ke warung maka teksnya akan ikut ke warung juga hmmm...Just Kidding biar nga terlalu BT sob

Baik Sobat berikut Scripnya :


<style type="text/css">
/* Circle Text Styles */
#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: #FF0000;



/* 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 = "Nama  sobat";

/* 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>

Silahkan Sobat Ikuti Langkah Langkah Berikut:
1.Masuk ke akun blog Sobat
2.Pilih Tata Letak/Rancangan =>Kemudian Pilih HTML/Java Script
3.Masukan kode/Script Diatas
4.Ubah kode yg berwarna KUNING sesuai keinginan sobat
5.Simpan
Dan Lihat Hasilnya
 



Selamat Mencoba Semoga Berhasil




    Kritik Dan Saran sobat Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

Related Post



15 komentar:

  • Infonya bermanfaat di tunggu follow back-nya..
    http://sumbersumbermanfaat.blogspot.com/

  • @AGEBOYsiip gan saling berkunjung slalu..:D

  • @Dede Muhiramakasih gan..follback sukses sob...kompak slalu..

  • isinya tips blog semua.. saya suka ini .. thanks ya

  • @Deny Kurniawan terimakasih gan kalau suka silahkan ambil buat sobat kalau ada yang bermanfaat ya..:D jangan lupa follow and like nya hehe

  • udah dicoba, dan udah berhasil..makasih ya, so great info...

  • @emje
    iya sama sama selamat menikmati ya..:)

  • semoga dengan semangat blogging terus juga meningkatkan kualitas seo nya buat om evan,,, page rank berikutnya akan mampir ke blog ini....

  • @Muhammad Joko Lukito ( Ojel HTC )amin...makasih support nya om OjelHTC,yang sebelumnya semangat blogging saya redup tapi melihat kreatifitas anak2 HTC dgn blog dan materinya yg bermutu saya jadi semangat lagi...

  • mantab gan...
    tapi jujur ane bingung dan pusing lihat blog agan...

  • bray tolong berkunjung di blog q n tinggalkan komntar saraaaan
    aq
    ivanfahmi.blogspot.com

  • Poskan Komentar

    Silahkan Berkomentar Di bawah ini Buat yang Belum Punya Akun Google/Blogger Bisa Di Ganti Dgn Anonymous

    ~ Berkomentarlah Dengan Sopan ~



    Silahkan Share Bila Anda Menyukainya Artikel ini



      ~ Evan Saputra ~

      Welcome

      Halo..sahabat evanzip...mau bergabung dengan ku di facebook @evanosaputra-Twitter @Evan_say atau di Yahoo Messenger ku @evansaputra33 ehhh...yang udah kunjung jangan lupa isi Buku Tamu nya Ya,,,

      My Profil

      Follow Me

     

    FIND US ON FACEBOOK

    SAHABAT KU

    Mengenalmu sangat menyenangkan

    Follow by Email


    BACK LINK

    EVAN < Free Auto Backlinks From 1Malaysia backlinks referer Backlink Exchange Free Automatic Backlink Florists Links Free Auto Backlinks SEO Links Exchanges, Blog Link Building Service Text Backlink Exchanges Text Backlink Exchanges Free Counter Text Backlink Exchanges Free Auto Backlinks Text Backlink Exchanges Auto Backlink Gratis Indonesia : Top Link Indo Free Automatic Backlink Backlink Exchange Statistik Blog
    Website Hit Counters
    page counter