Senin, 22 April 2013

Membuat text mengikuti kursor di web atau blog


nah bagi temen-temen yang pengen membuat animasi text mengelilingi kursor di blog atau webnya,,,,,,,, bisa anda ikuti langkah sebagai berikut,,,,
nah,,,, langsung saja bisa di copy paste coding di bawah ini,,,,,
 nahh,,,, buat temen-temen yang mau yang pake bloger  ikuti langkah-berikut ini
    1. pertama log-in ke bloge dlu
    2. kemudian masuk ke tata letak
    3. tambahkan gadget
    4. lalu pilih html/java scrip
    5. lalu pastekan coding di bawah ini
     <style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: &#39;comic sans ms&#39;, verdana, arial;
color: #0000FF;
#outerCircleText div {position: relative;}
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
</style>
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
<script type='text/javascript'>
//<![CDATA[
;(function(){
// "WELCOME ON MY BLOG..." (QUOTED STRING)
var msg = "Berbagi Informasi";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 25; // Set both to 1 for plain circle, set one of them to 2 for oval
var circleY = 0.75; var circleX = 2;
// Other numbers & decimals can have interesting effects, keep these low (0 to 3) // The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers, some rounding is applied)
// (decimals allowed, not negative numbers) var letter_spacing = 5; // The larger this multiplier, the bigger the circle/oval var diameter = 10;
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed) var rotation = 0.4; // This is not the rotation speed, its the reaction speed, keep low! var speed = 0.3;
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
// BERHENTI NGEDITNYA..! Berhenti dulu sampai sini ya…jangan diterusin ..! // if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split('');
mouse = function(e){
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,
o.style.left = (b || document.body).scrollLeft + 'px';
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'; };
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + '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'; }; }, drag = function(){ // makes the resistance
init = function(){ // appends message divs, & sets initial values for positioning arrays
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(); }, if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset;
setInterval(drag, 25);
} 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); }, ascroll = function(){
document.addEventListener('mousemove', mouse, false);
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); if (/Apple/.test(navigator.vendor))
</script
window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })();
//]]>
 
selamat mencoba,,,,,,,,,,,,,,,,,,,,,,,

2 komentar: