Circling Cursor

Circling Cursor

1st Part

Copy the code below then paste it on note pad

Code:

;(function(){

// Your message here (QUOTED STRING)
var msg = "WELCOME TO MY PAGE";

/* 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 = 18;

// 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 = 10;

// 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!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// 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);
};

})();



edit the word

WELCOME TO MY PAGE = enter the word that you want

then save as cursor.txt


2nd Part CSS

Copy the code below then paste it on note pad

Code:

#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE script */
font-style: italic;
font-weight: bold;
font-family: 'trebuchet', verdana, arial;
color: #ff0000;
/* End Optional */

/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */

You can edit the color of the circling text and the font style

then save as cursor.css




3rd Part JS

Now Upload your cursor.txt and cursor.css on your hosting site like www.stormpages.com, www.free-webhosts.com then copy the direct link/URL.

Copy this codes then paste it on note pad

Code:

incCSS("");
incJS("YOUR cursor.txt URL HERE");

incCSS("YOUR cursor.css URL HERE");
//////////////////////////////////////////////
/*CDT Functions*/
function incJS(filename){
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = filename;
   document.getElementsByTagName("head")[0].appendChild(script);
}
function incCSS(filename){
   var css = document.createElement("link");
   css.setAttribute("type","text/css");
   css.setAttribute("rel","stylesheet");
   css.setAttribute("href",filename);
   css.setAttribute("media","screen, print");
   document.getElementsByTagName("head")[0].appendChild(css);
}
/*END CDT Functions*/
//////////////////////////////////////////////



Replace the URL of your .css and .txt on the edited part.

For Example

Code:

incJS("http://www.stormpages.com/codezter/codez/circlingcursor.txt");

incCSS("http://codezter.webs.com/codezter/circling.css");


then save your work as circlingcursor.js then upload it your hosting sites.


Copy the direct link of your circlingcursor.js


then put it on your js linker

Code:


<script src="http://codezter.webs.com/Cursors/circlingcursor.js"></script>


done



fs: www.friendster.com/codezter
ym: codezter

---