Results 1 to 5 of 5

Thread: Pls help me to make this javascript cursor effect move clockwise

  1. #1
    Join Date
    Sep 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Pls help me to make this javascript cursor effect move clockwise

    I have this script on my page and the text circles anti-clockwise, pls, can someone help me with where I should edit to make it go clockwise. I will be very happy with any useful help.


    <!-- Mouse effect starts here -->
    <SCRIPT LANGUAGE="JavaScript1.2">
    <!--//

    //Circling text trail- Tim Tilton
    //Website: http://www.tempermedia.com/
    //Visit http://www.dynamicdrive.com for this script and more

    // your message here
    var msg='Zane Designs Limited';

    var font='Verdana,Arial';
    var size=3; // up to seven
    var color='#000000';

    // This is not the rotation speed, its the reaction speed, keep low!
    // Set this to 1 for just plain rotation w/out drag
    var speed=.3;

    // This is the rotation speed, set it negative if you want
    // it to spin clockwise
    var rotation=.2;

    // Alter no variables past here!, unless you are good
    //---------------------------------------------------

    var ns=(document.layers);
    var ie=(document.all);
    var msg=msg.split('');
    var n=msg.length;
    var a=size*15;
    var currStep=0;
    var ymouse=0;
    var xmouse=0;
    var scrll=0;
    var props="<font face="+font+" size="+size+" color="+color+">";

    if (ie)
    window.pageYOffset=0

    // writes the message
    if (ns){
    for (i=0; i < n; i++)
    document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
    }
    if (ie){
    document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i=0; i < n; i++)
    document.write('<div id="iemsg" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center;font-weight:regular;cursor:default">'+props+msg[i]+'</font></div>');
    document.write('</div></div>');
    }
    (ns)?window.captureEvents(Event.MOUSEMOVE):0;

    function Mouse(evnt){
    ymouse = (ns)?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
    xmouse = (ns)?evnt.pageX+20:event.x-20; // x-position
    }

    if (ns||ie)
    (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
    y=new Array();
    x=new Array();
    Y=new Array();
    X=new Array();
    for (i=0; i < n; i++){
    y[i]=0;
    x[i]=0;
    Y[i]=0;
    X[i]=0;
    }

    function makecircle(){ // rotation properties
    if (ie) outer.style.top=document.body.scrollTop;
    currStep-=rotation;
    for (i=0; i < n; i++){ // makes the circle
    var d=(ns)?document.layers['nsmsg'+i]:iemsg[i].style;
    d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15;
    d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2; // remove *2 for just a plain circle, not oval
    }
    }

    function drag(){ // makes the resistance
    scrll=(ns)?window.pageYOffset:0;
    y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
    x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
    for (var i=1; i < n; i++){
    y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
    x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

    }
    makecircle();
    // not rotation speed, leave at zero
    setTimeout('drag()',10);
    }
    if (ns||ie)window.onload=drag;

    // -->
    </SCRIPT>
    <!-- Mouse effect stops here -->

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by prince0
    // This is the rotation speed, set it negative if you want
    // it to spin clockwise
    var rotation=.2;
    That script is old though, this version will play better with other scripts:

    Code:
    <script type="text/javascript">
    
    //Circling text trail- Tim Tilton
    //Website: http://www.tempermedia.com/
    //Visit http://www.dynamicdrive.com for this script and more
    function cursor_text_circle(){
    // your message here
    var msg='Dynamic Drive!';
    
    var font='Verdana,Arial';
    var size=3; // up to seven
    var color='#000000';
    
    // This is not the rotation speed, its the reaction speed, keep low!
    // Set this to 1 for just plain rotation w/out drag
    var speed=.3;
    
    // This is the rotation speed, set it negative if you want
    // it to spin clockwise
    var rotation=-.2;
    
    // Alter no variables past here!, unless you are good
    //---------------------------------------------------
    
    
    var ns=(document.layers);
    var ie=(document.all);
    var dom=document.getElementById;
    msg=msg.split('');
    var n=msg.length; 
    var a=size*15;
    var currStep=0;
    var ymouse=0;
    var xmouse=0;
    var props="<font face="+font+" size="+size+" color="+color+">";
    
    if (ie)
    window.pageYOffset=0
    
    // writes the message
    	if (ns){
    	for (i=0; i < n; i++)
    		document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
    	}
    	else if (ie||dom){
    		document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
    		for (i=0; i < n; i++)
    			document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
    			document.write('</div></div>');
    	}
    	(ns)?window.captureEvents(Event.MOUSEMOVE):0;
    
    function Mouse(evnt){
    	ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
    	xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
    }
    
    if (ns||ie||dom)
    (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
    var y=new Array();
    var x=new Array();
    var Y=new Array();
    var X=new Array();
    for (i=0; i < n; i++){
    	y[i]=0;
    	x[i]=0;
    	Y[i]=0;
    	X[i]=0;
    }
    
    var iecompattest=function(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
    }
    
    var makecircle=function(){ // rotation properties
    if (ie) outer.style.top=iecompattest().scrollTop+'px';
    currStep-=rotation;
    	for (i=0; i < n; i++){ // makes the circle
    		var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
    		d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
    		d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
    	}
    }
    
    var drag=function(){ // makes the resistance
    	y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
    	x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
    	for (var i=1; i < n; i++){
    		y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
    		x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
    
    	}
    	makecircle();
    	// not rotation speed, leave at zero
    	setTimeout(function(){drag();},10);
    }
    if (ns||ie||dom)
    if ( typeof window.addEventListener != "undefined" )
        window.addEventListener( "load", drag, false );
    else if ( typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", drag );
    else {
        if ( window.onload != null ) {
            var oldOnload = window.onload;
            window.onload = function ( e ) {
                oldOnload( e );
                drag();
            };
        }
        else
            window.onload = drag;
    }
    
    }
    cursor_text_circle();
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default It plays from behind

    thanks for the help, i so much appreciate it but, the text rotates from the last word instead from the front, I would request that you preview it yourself and see what i mean.

    thanks very much, expecting your help once again

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, you could just reverse the order of the message, or do it like so:

    Code:
    . . . 
    //Circling text trail- Tim Tilton
    //Website: http://www.tempermedia.com/
    //Visit http://www.dynamicdrive.com for this script and more
    function cursor_text_circle(){
    // your message here
    var msg='Dynamic Drive!'.split('').reverse().join('');
    
    var font='Verdana,Arial';
    var size=3; // up to seven
    var color='#000000';
    
    // This is not the rotation speed, its the reaction speed, keep low!
    // Set this to 1 for just plain rotation w/out drag
    var speed=.3;
    
    // This is the rotation speed, set it negative if you want
    // it to spin clockwise
    var rotation=-.2;
    
    // Alter no variables past here!, unless you are good
    //--------------------------------------------------- . . .
    And make sure you are using the negative value for the:

    var rotation=-.2;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default One more problem

    Thanks very much, it rotated as i wanted only that when i move the cursor the text follows the cursor from behind instead of the beginning of the text.
    please preview and see what i mean.

    Once again thank you very much

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •