Results 1 to 9 of 9

Thread: Javascript interactive swirl text?

  1. #1
    Join Date
    May 2012
    Location
    Earth
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Javascript interactive swirl text?

    I had no idea what to title this but I found this snip of code years and years ago, modified it a little and put it on the front page of my site. It's been there forever and I sort of forgot about it since it's just a goofy little personal website that I fart around with whenever the mood strikes me. However, I noticed that the code doesn't function properly in Chrome. It still works in IE but I've been using chrome for a while and don't like how it's behaving. =(

    I went to the authors website but it seems to be as depreciated as this code and I doubt I'd get a response from him so I guess I'm here asking if there's an easy way to tweak this into compliance or if there is something out there that does the same thing as this:

    Code:
    <script language="javascript">
    
    // all code copyright jeff heuer 1999, 2000
    // please give me credit if you use this code
    // jeff@deconstructor.com
    
    var displaying = rotating = momentum = 0;
    var lasty, lastx, dy, dx, my, mx;
    var x = new Array();
    var y = new Array();
    var z = new Array();
    
    l = new Array("&hellip;","&hellip;","&hearts;","&hearts;","&hearts;","&hearts;","&bull;","L","I","G","H","T","F","E","A","T","H","E","R","&bull;","N","E","T","&bull;","&hearts;","&hearts;","&hearts;","&hearts;","&hellip;","&hellip;");
    
    function init() {
    	for (i = 0; i < l.length; i++) {
    		z[i] = Math.sin(i*.524 - 2.6) * 50;
    		y[i] = Math.cos(i*.524 - 2.6) * 50;
    		x[i] = (l.length * 5) - (i * 10);
    	}
    
    	setup();
    	display();
    
    	window.setInterval("rotate();", 20)
    
    	document.onmousedown = down;
    	document.onmousemove = move;
    	document.onmouseup = up;
    }
    
    function setup() {
    
    	for (i = 0; i < l.length; i++) {
    		document.body.insertAdjacentHTML("AfterBegin", "<div id=\"pt" + i + "\" style=\"position: absolute;\">" + l[i % l.length] + "</div>");
    	}
    	displaying = 1;
    }
    
    function down() {
    	rotating = 1;
    	dy = dx = momentum = 0;
    }
    
    function move(evt) {
    	dy = lasty - window.event.clientY;
    	dx = lastx - window.event.clientX;
    	lasty = window.event.clientY;
    	lastx = window.event.clientX;
    	return false;
    }
    
    function up() {
    	rotating = 0;
    	momentum = 1;
    }
    
    function rotate() {
    	if (rotating) {
    		transform(dy, dx);
    		my = dy;
    		mx = dx;
    	} else if (momentum) {
    		my *= 0.95;
    		mx *= 0.95;
    		transform(my, mx);
    	}
    	dy = dx = 0;
    	display();
    }
    
    function transform(dx, dy) {
    	dx *= .0175;
    	dy *= .0175;
    
    	for (i = 0; i < x.length; i++) {
    		dys = Math.sin(dy);
    		dyc = Math.cos(dy);
    		dxs = Math.sin(dx);
    		dxc = Math.cos(dx);
    		ztemp = z[i] * dyc - x[i] * dys;
    		x[i] = z[i] * dys + x[i] * dyc;
    		z[i] = y[i] * dxs + ztemp * dxc;
    		y[i] = y[i] * dxc - ztemp * dxs;
    	}
    }
    
    function display() {
    	if (displaying) {
    		for (i = 0; i < x.length; i++) {
    			scalar = (1.2 / ((z[i] * 1.2)/500 + 1));
    			xp = x[i] * scalar;
    			yp = y[i] * scalar;
    
    			tempid = document.all.tags("DIV")[i].id;
    			eval(tempid + ".style.pixelTop = " + document.body.clientHeight/2 + " - yp");
    			eval(tempid + ".style.pixelLeft = " + document.body.clientWidth/2 + " + xp");
    
    			if (scalar < 0.95) {
    				color = "#cccccc";
    			} else if (scalar < 1.2) {
    				color = "#999999";
    			} else if (scalar < 1.05) {
    				color = "#666666";
    			} else {
    				color = "#333333";
    			}
    			eval(tempid + ".style.color = \"" + color + "\"");
    			eval(tempid + ".style.fontSize = " + (12+(scalar-1)/.035));
    		}
    	}
    }
    </script>
    Example at www.lightfeather.net
    Last edited by Lightfeather; 05-12-2012 at 11:46 AM. Reason: Misspellings

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    This now requires a standards invoking DOCTYPE which messes up the rainbow menu in IE, causing it to throw a non-fatal error, which will show up as a yellow triangle in the status bar of IE 8 and less. To fix that, replace the doRainbowAnchor function in menu.js with this one:

    Code:
    function doRainbowAnchor()
    {
    if (act == 0) {
    var obj = event.srcElement;
    while (obj && obj.tagName != 'A' && obj.tagName != 'BODY') {
    obj = obj.parentElement;
    if (obj && (obj.tagName == 'A' || obj.tagName == 'BODY'))
    break;
    }
    
    if (obj && obj.tagName == 'A' && obj.href != '') {
    objActive = obj;
    act = 1;
    clrOrg = objActive.style.color;
    TimerID = setInterval(ChangeColor,100);
    }
    }
    }
    Here's the updated code for the swirling text page:

    Code:
    <!DOCTYPE html>
    <!--Created by Nicole Cox-->
    <html>
    <head>
    <title>Lightfeather's Nest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="lightfeather's nest. a bunch of stuff and a little about me.">
    <meta name="keywords" content="feather, blog, chloe chronicles, lightfeather, lightfeather's nest, nicole, damon, perdue, damon perdue, brigadoon">
    
    <link rel="icon" href="favicon.ico" type="image/x-icon"> 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style type="text/css">
    a {
    	text-decoration: none;
    }
    html, body {
    	background-color: white;
    	font-family: verdana,geneva,sans-serif;
    	font-size: 9px;
    	cursor: crosshair;}
    html {
    	height: 100%;
    }
    </style>
    <script type="text/javascript">
    
    // all code copyright jeff heuer 1999, 2000
    // please give me credit if you use this code
    // jeff@deconstructor.com
    (function(){
    
    	var text = '&hellip;&hellip;&hearts;&hearts;&hearts;&hearts;&bull;LIGHTFEATHER&bull;NET&bull;&hearts;&hearts;&hearts;&hearts;&hellip;&hellip;';
    
    	var displaying = rotating = momentum = 0;
    	var lasty, lastx, dy, dx, my, mx;
    	var x = [];
    	var y = [];
    	var z = [];
    	var i, scalar, color, rotating, momentum, dxs, dxc, dys, dyc, ztemp, rc, divs, tdivstyle;
    
    	var addEvent = (function(){return window.addEventListener? function(el, ev, f){
    			el.addEventListener(ev, f, false);
    		}:window.attachEvent? function(el, ev, f){
    			el.attachEvent('on' + ev, f);
    		}:function(){return;};
    	})();
    
    	function init() {
    		text = text.match(/(&[^;]{2,8};)|(.)/g);
    		for (i = text.length - 1; i > -1; --i) {
    			z[i] = Math.sin(i*.524 - 2.6) * 50;
    			y[i] = Math.cos(i*.524 - 2.6) * 50;
    			x[i] = (text.length * 5) - (i * 10);
    		}
    
    		setup();
    		display();
    		rc.style.top = (divs[0].offsetLeft - divs[divs.length - 1].offsetLeft) / 2 + Math.max(divs[0].offsetWidth, divs[0].offsetHeight) + 'px';
    
    		window.setInterval(rotate, 20);
    
    		addEvent(document, 'mousedown', down);
    		addEvent(document, 'mousemove', move);
    		addEvent(document, 'mouseup', up);
    	}
    	addEvent(window, 'load', init);
    
    	function setup() {
    		document.body.insertAdjacentHTML('beforeend', '<div id="rotatingcontainer" style="position: relative; margin: auto; width: 0px;"></div>');
    		rc = document.getElementById('rotatingcontainer');
    
    		for (i = text.length - 1; i > -1; --i) {
    			rc.insertAdjacentHTML('beforeend', '<div style="position: absolute;">' + text[i] + '<\/div>');
    		}
    
    		divs = rc.getElementsByTagName('div');
    		displaying = 1;
    	}
    
    	function down(evt) {
    		evt = evt || event;
    		rotating = 1;
    		dy = dx = momentum = 0;
    		evt.returnValue = false;
    		if(evt.preventDefault){evt.preventDefault();}
    		return false;
    	}
    
    	function move(evt) {
    		evt = evt || event;
    		dy = lasty - evt.clientY;
    		dx = lastx - evt.clientX;
    		lasty = evt.clientY;
    		lastx = evt.clientX;
    		return false;
    	}
    
    	function up() {
    		rotating = 0;
    		momentum = 1;
    	}
    
    	function rotate() {
    		if (rotating) {
    			transform(dy, dx);
    			my = dy;
    			mx = dx;
    		} else if (momentum) {
    			my *= 0.95;
    			mx *= 0.95;
    			transform(my, mx);
    		}
    		dy = dx = 0;
    		display();
    	}
    
    	function transform(dx, dy) {
    		dx *= .0175;
    		dy *= .0175;
    
    		for (i = x.length - 1; i > -1; --i) {
    			dys = Math.sin(dy);
    			dyc = Math.cos(dy);
    			dxs = Math.sin(dx);
    			dxc = Math.cos(dx);
    			ztemp = z[i] * dyc - x[i] * dys;
    			x[i] = z[i] * dys + x[i] * dyc;
    			z[i] = y[i] * dxs + ztemp * dxc;
    			y[i] = y[i] * dxc - ztemp * dxs;
    		}
    	}
    
    	function display() {
    		if (displaying) {
    			for (i = x.length - 1; i > -1; --i) {
    				scalar = (1.2 / ((z[i] * 1.2) / 500 + 1));
    
    				tdivstyle = divs[i].style;
    				tdivstyle.top = -y[i] * scalar + 'px';
    				tdivstyle.left = x[i] * scalar + 'px';
    				tdivstyle.color = scalar < 0.95? '#cccccc' : scalar < 1.2? '#999999' : scalar < 1.05? '#666666' : '#333333';
    				tdivstyle.fontSize = 12 + (scalar - 1) / 0.035 + 'px';
    			}
    		}
    	}
    })();
    </script>
    
    <script type="text/javascript" src="menu.js"></script>
    </head>
    
    <!--color-->
    <body>
    
    <!--body-->
    <div style="text-align: center; position: relative; z-index: 2">
    <a href="http://www.venganza.org" target="_blank"><img src="http://www.venganza.org/wp-content/uploads/2007/10/fsmrof.jpg" style="border: 0;" alt="" /></a><br />
    
    <b>directions:</b> 1. click 2. drag 3. release<br>
    [<a href="blog/" 
    onMouseOver="status='Lightfeathers Nest';return true" 
    onMouseOut="status=' '; return true">Journal</a>]
    
    [<a href="http://www.houseofgrog.com" 
    onMouseOver="status='House o Grog';return true" 
    onMouseOut="status=' '; return true">Forum</a>]
    
    [<a href="http://twitter.com/lightfeather_" 
    onMouseOver="status='Twitter';return true" 
    onMouseOut="status=' '; return true">Twitter</a><a href="http://twitter.com" 
    onMouseOver="status='Twitter';return true" 
    onMouseOut="status=' '; return true">*</a>]
    
    [<a href="http://www.facebook.com/lightfeather" 
    onMouseOver="status='Facebook';return true" 
    onMouseOut="status=' '; return true">Facebook</a><a href="http://www.facebook.com" 
    onMouseOver="status='Facebook';return true" 
    onMouseOut="status=' '; return true">*</a>]
    <p>
    </div>
    
    </body>
    </html>
    Important: More has changed than just the script, so use the whole page.

    Note: Instead of centering vertically, it now appears directly after the menu (with space reserved for rotating to its maximum height). Vertical centering can be restored. But on screens with a tall window that leaves a lot of white space between the menu and the swirling text.
    Last edited by jscheuer1; 05-12-2012 at 03:17 PM. Reason: improve style - later: improve response in Mozilla
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Lightfeather (05-12-2012)

  4. #3
    Join Date
    May 2012
    Location
    Earth
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much! I know it's such a silly thing but it means a lot to me. <3

    I'm so glad it's working properly now! That wholly unnecessary swirling doodad.

    It lives!
    Last edited by Lightfeather; 05-12-2012 at 11:47 AM. Reason: more misspellings, apparently my chrome spell check took a vacation.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Great! But I notice it's backward. So I've updated the code in my post. I also made some other improvements.
    - John
    ________________________

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

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Lightfeather (05-12-2012)

  7. #5
    Join Date
    May 2012
    Location
    Earth
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    I didn't even notice that at first, I just gave it a spin and was happy it wasn't trying to highlight everything when I did. Thanks for catching that. <3 I probably wouldn't have noticed for another two years. =/

  8. #6
    Join Date
    May 2012
    Location
    Earth
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Also when I tried to use the "thanks" button at the bottom of the posts here I get this:

    Code:
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/init.php on line 55
    
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/init.php on line 107
    
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/init.php on line 111
    
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/init.php on line 119
    
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/init.php on line 130
    
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/init.php on line 134
    
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/init.php on line 142
    
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/init.php on line 211
    
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/init.php on line 389
    
    Deprecated: Assigning the return value of new by reference is deprecated in /home/gchiang/public_html/forums/includes/class_core.php on line 2552

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    You're welcome. It bothered me that it wasn't working properly in Firefox, too sluggish. At that point I did every optimization I could think of, and realized in the process that reversal of the text would be a potential issue. It didn't fix Firefox - I figured that out later (that's part of the 'other improvements' I mentioned), but it did make me pay attention to the forward/backward business.

    About the Thanks Button - The forum was updated recently. That's a known issue that the admin swears he will get to. It's just a matter of time. There were a lot of things like that at first, he's fixed most of them. As you can see though, the feature still works.
    - John
    ________________________

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

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Lightfeather (05-13-2012)

  11. #8
    Join Date
    May 2012
    Location
    Earth
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Well, I've updated both my index.html and the menu.js files with what is currently posted above, and I have to say, you've gone above and beyond the call of duty. This is far more than I ever expected and I'm so very grateful. I'd love to show my appreciation monetarily but at the moment we're weathering some rough seas here. I'm definitely putting you on my IOU list and I will thank you properly for your time and effort as soon as I'm able. <3

    (In all sincerity I probably should have retired the websites in order to save cash, but the cost is so negligible due to the excellent rates I get with my long time webhost, and I gain hours of enjoyment tweaking and modifying the forum that we decided to make cuts elsewhere to stay afloat.)

    --------------------------------------------
    "Experience is what you get when you don't get what you want."

    (Tried to edit my profile to add a signature and avatar but it appears that I'm blocked.)

  12. #9
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,509
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Quote Originally Posted by Lightfeather View Post
    (Tried to edit my profile to add a signature and avatar but it appears that I'm blocked.)

    I believe you need to be a regular coder to make an avatar and signiture.

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
  •