2kno

This is a logo I designed for a company that provides an email publishing web-based service.  The users create articles and maintain a mailing list of subscribers. Each subscriber is tagged as to what product lines they are interested in. The articles are also similarly tagged so that when it comes time to publish, the subscribers only get information on those products they are interested in.

I wanted to make an animation that would take the place of those annoying splash  or intro screens that were a part of the old web. Everyone always looks for the “skip this intro” button anyway. I thought a brief animation on the actual page when it launches would be the best approach.

The thought I had in my head was emails coming out of the logo and spreading across the page as if they were being “sent out”. This seemed to be the simplest way of expressing what the service actually does without getting too didactic.  I had seen this movie

which may have been where I got the idea.  I didn’t really want to spend a lot of time on this since I have lots more work ahead of me in designing this website, but I really wanted to see this through. I started out with a sketch of how I thought best to go about starting to write the code.

Using  javascript I could change the position, size and transparency of the icons. The diagram I drew informed me that if I would live with only 8 possible compass points for direction of movement, I could really make this process simple. Here is the code:

<!--

var r012vals = new Array (-1,0,1);

function pageSetup() {
	setTimeout("startEnvelope('env01');",500);
	setTimeout("startEnvelope('env02');",650);
	setTimeout("startEnvelope('env03');",800);
	setTimeout("startEnvelope('env04');",900);
	setTimeout("startEnvelope('env05');",1000);
	setTimeout("startEnvelope('env06');",1200);
	setTimeout("startEnvelope('env07');",1250);
	setTimeout("startEnvelope('env08');",1400);
	setTimeout("startEnvelope('env09');",1500);
	setTimeout("startEnvelope('env10');",1650);
	setTimeout("startEnvelope('env11');",1800);
	setTimeout("startEnvelope('env12');",1900);
	}

function r012() {
	return r012vals[Math.floor(Math.random()*3)];
	}

function moveEnvelope(env,xf,yf,xPos,yPos,alph,size) {
	yp = yPos+"px";
	xp = xPos+"px";
	document.getElementById(env).style.top = yp;
	document.getElementById(env).style.left = xp;
	yPos = yPos + 3*yf;
	xPos = xPos + 3*xf;
	if (size > 0) { size ; }
	sz = size+"px";
	document.getElementById(env).style.width = sz;
	if (alph < 199) {
		alph++;
		setOpacity(env,alph);
		setTimeout(function(){moveEnvelope(env,xf,yf,xPos,yPos,alph,size);},10);
		}
	}

function startEnvelope(ex) {
	xf = r012();
	yf = r012();
	if (xf==0 &#038;& yf==0) { yf = 1; }
	xPos = 100;
	yPos = 20;
	alph = 0;
	size = 140;
	env = ex;
	document.getElementById(env).style.visibility = "visible";
	moveEnvelope(env,xf,yf,xPos,yPos,alph,size);
	}

function setOpacity(myOBJ,opac) {
	var tOBJ = document.getElementById(myOBJ).style;
	if (opac > 100) { opac = 100 - (opac - 100); }
	opac = (opac == 100)?99.999:opac;		// IE/Win
	tOBJ.filter = "alpha(opacity:"+opac+")";	// Safari<1.2, Konqueror
	tOBJ.KHTMLOpacity = opac/100;			// Older Mozilla and Firefox
	tOBJ.MozOpacity = opac/100;			// Safari 1.2, newer Firefox and Mozilla, CSS3
	tOBJ.opacity = opac/100;
	}

//-->

The first thing was to look at how to make the animation random every time the page loads. If you look at my diagram, you will see that a vector can be described in terms of three numbers which are -1, 0 and +1.  I established an array with these three numbers and created a random number generator that would give me a random number between 0 and 2 to select one item in the array. Only one problem. There is a case where it will generate two zeros. There is no vector for two zeros so I had to have a line of code to check for that. Quick and dirty fix on that was just to make the y vector a 1 in that case. Not perfect, but it works. The rest is fairly straightforward and makes something that looks like this in a screen capture: and for the full effect, you can click here and watch it in motion. Mouseover the logo and it will do another random effect.