Javascript interactive swirl text?

**Lightfeather** · 05-06-2012, 11:53 AM

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

**jscheuer1** · 05-06-2012, 04:54 PM

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.

**Lightfeather** · 05-07-2012, 03:50 AM

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!

**jscheuer1** · 05-08-2012, 12:30 AM

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

**Lightfeather** · 05-12-2012, 11:17 AM

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. =/

**Lightfeather** · 05-12-2012, 11:18 AM

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

**jscheuer1** · 05-12-2012, 03:11 PM

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.

**Lightfeather** · 05-13-2012, 01:09 AM

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.)