cara membuat tulisan yang mengikuti kursor
pada post kali ini saya akan membagi trik tentang aksesoris aksesoris untuk blog. kali ini saya akan mengepost tentang cara membuat tulisan yang mengikuti kursor.
efek dari trik saya kali ini adalah menambahkan tulisan pada kursor di mana saat di gerakan kemanapun tulisan itu akan mengikuti kursor. tulisan dan warnanya bisa di ubah sesuai yang kita inginkan. berikut caranya :
Cara pemasangan kode kursor mouse di ikuti teks di blog sangatlah mudah,
Karena sobat hanya akan memasukkan kode script pada kotak
HTML/JavaScript dalam Tata Letak blog. Dan tentunya sobat tidak usah
susah-susah untuk Edit HTML dalam Template blog sobat yang mungkin akan
jadi sangat rumit dan memakan banyak waktu.
Jika sobat tertarik ingin membuat dan memasang kursor mouse di ikuti
teks atau tulisan di blog sobat, Silahkan ikuti langkah-langkahnya
sebagai berikut:
- Langkah yang pertama. Silahkan sobat >> Masuk/Login >> ke Blog sobat.
- Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Tata Letak >> pilih posisi dan klik >> Tambah Gadget >> pilih >> HTML/JavaScript lalu klik tanda +
- Kemudian silahkan sobat masukkan semua Kode Script berikut kedalam kotak HTML/JavaScript.
<style type="text/css">
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color:
#FF0000;
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">
;(function(){
var msg = "
welcome";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
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-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>
ket:
Keterangan:
#FF0000 adalah Kode warna
Teks atau tulisan yang mengikuti kursor mouse, Silahkan sobat ganti
dengan kode warna yang lain sesuai dngan keinginan sobat.
Warna
BIRU adalah Teks yang mengikuti kursor mouse, Silahkan ganti dengan Teks atau tulisan seperti yang sobat inginkan.
