FSTUTS FORUMERS
Dont forget to join!

Please Read the forum rules and regulations before posting^_^

Thank You!

Circling Cursor

Go down

Circling Cursor

Post by [ MALIBOG ] codezter on Thu May 28, 2009 6:15 am

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 Very Happy



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










avatar
[ MALIBOG ] codezter
Amatuer
Amatuer

Posts : 21
Reputation : 18
Join date : 2009-05-27
Age : 27
Location : PH

http://www.friendster.com/codezter

Back to top Go down

Re: Circling Cursor

Post by [DYOSZA]BEBOT on Thu May 28, 2009 6:53 am

nice lolo Very Happy cheers

_________________
]

nsa iba man ang hnhnap mo
iba parin pgako GIRLFRIEND MO Smile
fs cko

http://profiles.friendster.com/luciitaelbolera01
ym : b.3bot

LONG LEAVE DYOSZA :d
avatar
[DYOSZA]BEBOT
MOD
MOD

Posts : 227
Reputation : 172
Join date : 2009-05-26
Age : 28
Location : DOHA QATAR

Back to top Go down

Re: Circling Cursor

Post by [DYOSZA]JiNRiKiSHA on Fri May 29, 2009 2:48 pm

thanks for sherin it here Very Happy

PLEASE INCLUDE THE CREDITS Razz

_________________
avatar
[DYOSZA]JiNRiKiSHA
Graphic Artist
Graphic Artist

Posts : 207
Reputation : 15
Join date : 2009-05-26
Age : 27
Location : Mars

http://www.friendster.com/miinidii

Back to top Go down

Re: Circling Cursor

Post by [DYOSZA]SHEYN on Fri May 29, 2009 10:40 pm

tnx foh' sharin Very Happy

_________________


| FS CO |
| PLURK! |



isnt it CUTE?! Very Happy

avatar
[DYOSZA]SHEYN
MOD
MOD

Posts : 128
Reputation : 15
Join date : 2009-05-26
Age : 24
Location : bulacan

Back to top Go down

Re: Circling Cursor

Post by [DYOSZA]candy on Sat May 30, 2009 12:43 pm

Thank'z ^_^

[DYOSZA]candy
MOD
MOD

Posts : 102
Reputation : 43
Join date : 2009-05-27
Age : 25

Back to top Go down

Re: Circling Cursor

Post by [DYOSZA]BEBOT on Sat May 30, 2009 5:33 pm

medyo mhba haha try ko gwn Very Happy

_________________
]

nsa iba man ang hnhnap mo
iba parin pgako GIRLFRIEND MO Smile
fs cko

http://profiles.friendster.com/luciitaelbolera01
ym : b.3bot

LONG LEAVE DYOSZA :d
avatar
[DYOSZA]BEBOT
MOD
MOD

Posts : 227
Reputation : 172
Join date : 2009-05-26
Age : 28
Location : DOHA QATAR

Back to top Go down

Re: Circling Cursor

Post by [DYOSZA]gane on Sun Jun 21, 2009 9:06 am

tenchu s share
avatar
[DYOSZA]gane
MOD
MOD

Posts : 221
Reputation : 122
Join date : 2009-05-26
Age : 21
Location : Baguio City, Philippines

Back to top Go down

Re: Circling Cursor

Post by chix_kiz on Mon Aug 10, 2009 5:19 am

still workin' Question

i guess not Sad
avatar
chix_kiz
Amatuer
Amatuer

Posts : 73
Reputation : 1
Join date : 2009-08-08
Age : 28
Location : United States of Sadako

Back to top Go down

Re: Circling Cursor

Post by `qulata.3o94 :) on Fri Aug 14, 2009 3:21 pm

it doesn't work on mine, either Very Happy
avatar
`qulata.3o94 :)
MOD
MOD

Posts : 141
Reputation : 12
Join date : 2009-07-02
Age : 24
Location : earth :)

http://qlt94.webs.com

Back to top Go down

Re: Circling Cursor

Post by Sponsored content


Sponsored content


Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum