Tulisan yang selalu mengikuti kemana cursor berada, kayak dua hati yang sedang jatuh cinta
Sumber kode ini dari
Tim Tilton
Contohnya lihat sendiri yang selalu mengikuti cursor brader.
Masuk ke
Design >>
Edit HTML >> Letakkan diatas
</head>
<style type="text/css">
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: Comic Sans MS;
color: #000; /*Disesuaikan warna kesukaan brader*/
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(){
// Di isi dengan tulisan brader
var msg = "Nano Yulianto";
// Untuk memperbesar ukuran huruf (m
var size = 24;
// Untuk memperbesar jarak lingkarang berputarnya
var circleY = 0.75; var circleX = 3;
// Untuk jarak spasi
var letter_spacing = 5;
// untuk memperbesar lingkaran huruf (pokoknya coba-coba saja)
var diameter = 10;
// Rotasi kecepatan huruf
var rotation = 0.4;
// kecepatan huruf bergerak
var speed = 0.3;
////////////////////// Stop sampai sini editnya //////////////////////
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>
Semoga Bermanfaat...
Alhamdulillah
SUmber Dari http
://nanoyulianto.blogspot.com/2010/07/tulisan-yang-selalu-mengikuti.html
Berapa banyak energi yang kita gunakan ketika menghidupkan sebuah perangkat komputer/laptop? Secara tak sadar, ketika menyalakan komputer (serta melakukan aktivitas lanjutannya seperti menjelajah dunia maya, dsb), kita telah membantu memproduksi gas CO2 (Sebagai salah satu penyebab pemanasan global). Bagaimana hal tersebut bisa terjadi?
