This site layout is a couple of firsts for me. For one, it’s a single-page layout, which wound up not being that big a deal; WordPress sites work off a templating system, and since I like to keep the site files to a minimum I’ll use the is_page() conditional to signify different pages.

Also, lots of bright colors in this layout. It’s not that I hate color, it’s just that I’m afraid of it. It scares me to death. The wrong colors can ruin an otherwise good layout, and my lack of experience with it was something that kept from using it a lot. I’m happy with where it wound up, so I guess next time I don’t have to be so a-skeered.

The last “new thing” I did for this site was come up with a JavaScript function for the animations. (They’re not on the site yet; we’re still working on them). Because Eri’s a stop-motion animator, I wanted a way to animate frames of transparent PNGs (GIF transparencies are just the worst).

By creating a transparent PNG with the frames evenly spaced and applying a JavaScript function to it, walk cycles are really easy to create. Check it out:

$(function(){

	function getNextFrame(framePositions, selector, frames, width){
		var currentFrame = $(selector).find('img').css('left');
		var currentFrame = currentFrame.replace('px', '');
		var currentFrame = -(currentFrame)/width;

		var nextFrame = currentFrame + 1;

		if (direction == 0){

			newFrame = framePositions[nextFrame];

			if (newFrame == undefined){
				nextFrame = currentFrame -1;
				newFrame = framePositions[nextFrame];
				direction = 1;
			}

		} else {

			nextFrame = currentFrame -1;
			newFrame = framePositions[nextFrame];

			if (nextFrame == -1){
				nextFrame = currentFrame  + 1;
				newFrame = framePositions[nextFrame];
				direction = 0;
			}

		}

		$(selector).find('img').css({left: framePositions[nextFrame]});

	}

	function stopMotion(selector, frames, width, height, fps){

		var speed = 1000/fps;

		$(selector).css({overflow: 'hidden', height: height+'px', width: width+'px', position: 'absolute'});
		$(selector).find('img').css({position: 'absolute', left:0});

		var framePositions = Array();
		for (i=0; i