Sabtu, 18 Ogos 2012

CURSOR BERTEKS...

Huuuuuhaaaiiiiiii...korang semua sihat ker???? Harap sihat la yeeeekkkk...Ok la hari ni aku nak kongsi satu cara nak buatkan 'CURSOR' korang nampak canggih sikit...."Canggih macam mana tu???? ni bagi 'CURSOR' korang nampak ada perkataan dok ikut...ke hulu...ke hilir..nak???? hehehe aku ada cara nya...ermmm...macam dalam gambar dekat bawah ni....
  

Korang nak....
Korang ikut ok...

1.login akaun blogger korang semua > Layout> Add a Gadget> HTML/Javascript

2.Lepas tu...ada keluar ruang kosongkan....korang copy kod dekat bawah ni...lepas tu korang paste
   yerrrkkk.

<style type="text/css">
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
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 = "perkataan yang korang nak";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
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>

Kalau nak buat sedikit touch up dekat cursor korang tu...mana tau korang tak suka dengan teks dia..warna dia atau font dia...korang boleh la buat perubahan macam ni :

KORANG CARI :
a) #FF0080 = Itu kod untuk warna...(MENGIKUT KOD WARNA HTML...) 
b)"perkataan yang korang nak" =Tukar dengan Perkataan yang korang nak gantikan
c)var speed = 0.2  = Kelajuan mengikut cursor korang tukar nombor 0.2 untuk tukarkan kelajuan
d)comic sans = Korang tukar dengan jenis font yang korang sukewww ok...

3.Kalau dah selesai....dah puas hati dengan CURSOR korang...tekan butang 'SAVE'

Selesai....harap korang faham dan berjaya buat ok...(^_^)

Tiada ulasan:

Catat Ulasan

LINKWITHIN

Related Posts Plugin for WordPress, Blogger...
Purple Heart - Link Select
Purple Heart Set Pointer



Instagram

::ARTIKEL MENARIK::