Hallo sobat blogger, mungkin sobat blogger agak sedikit kesulitan membuat tulisan yang bergerak mengikuti kursor pada blog. seiring dengan perkembangan dunia maya yang semakin pesat, para blogger pun turut berkreasi dalam menampilkan karya terbaik yang suddah tetntu sanga membantu para blogger utamanya bagi pemula. sobat mungkin sering melihat beberapa blog yang kursornya di ikuti oleh tulisan.
Nah, untuk itu saya mau bagi-bagi sedikit nih pengettahuan ane tentang bagaimana caranya membuat animasi tulisan bergerak mengikuti kursor pada blog.
Caranya sangat gampang, ikuti petunjuk berikut
1. Sobat login ke blog sobat, Pada Dasbord, sobat klik menu Tata Letak
3. Tambah gatget
4. Pilih menu HTML/Java Script
5. Copy Paste css di bawah ini pada kolom HTML/Java Scrip
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family:
'ARIAL';
color:
#8D38C9;
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 =
"TULISKAN TEKS SOBAT INGINKAN";
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>
6. Pastekan Kode di atas pada kolom Gatget berikut ;
7. Save Gatget dan lihat hasilnya.
Keterangan ;
Tulisan warna
BIRU ganti dengan jenis Huruf dan warna kesukaan soba
Tulisan warna
MERAH ganti dengan teks yang di inginkan
Oke sobat, sekian dulu
Tutorial cara membuat tulisan mergerak mengikuti kursor semoga bermanfaat.
file:///D:/My%20Documents/Website/Web%20Pribadi/marquee/marquee/Marquee%20pribadi.html
BERANDA
