Cara Membuat
Animasi Cursor Diikuti Teks Di Blog
Sumber:http://hansmjlkcommunity.blogspot.co.id/2013/04/cara-membuat-animasi-cursor-diikuti.html
.................................................................................................................................................................
Meski telah banyak yang membahas tentang Cara Membuat Animasi Cursor Diikuti
Teks Di Blog namun tidak ada salahnya saya sekedar mengingatkan kembali
tentang animasi yang satu ini demi menyempurnakan artikel demi artikel yang
saya buat.
Buat kalian
yang penasaran nih dan ingin segera mencobanya silahkan perhatikan caranya di
bawah ini.
1. Seperti biasa kalian harus login terlebih dahulu.
2. Pilih menu Tata Letak kemudian Add gadget kemudian pilih HTML/Javascript.
3. Copy script di bawah dan pastekan pada HTML/Javascript bagian konten.
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'Cambria', verdana, arial;
color: #4acb35;
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'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Silahkan Ganti Tulisan Ini";
/* 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 =20;
// 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 = 15;
// Rotation speed, set it negative
if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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>
Keterangan :
- Tulisan berwarna hijau adalah jenis hurup silahkan kalian ganti
sesuai keinginan
- Tulisan berwarna merah adalah teks yang akan mengikuti arah cursor
silahkan kalian ganti.
4. Setelah
semuanya beres kemudian save dan lihat hasilnya.
