One of the latest crazes in web design is the parallax effect, or a 3D effect created by layering. You can find a really amazing, complicated design at NikeBetterWorld. Recently I created the effect on a much simpler scale for a small wakeboarder’s website.

I used jQuery to get the job done. The function works as follows:

//spd tells the object how quickly to move with the window scroll. 1 is normal speed.
opts.spd = opts.spd || 1;

This is the function to calculate the new position for the object based on the position of the window scroll.

function calcMove() {
//get the scroll position from top, document height, window height, and object height
	var offset =  $(document).scrollTop();
	var docSize = $(document).height();
	var windowSize = $(window).height();
	var boxSize = $(obj).height();
//calculate the percent down the document
	var room = offset/(windowSize - docSize);
//calculate the how fast the object should move and where it should be in relation to actual position
	var move = ((docSize * room) * opts.spd) + opts.startPos;
	return move;
}

Then you need a bit of javascript to place the objects and give them speed.

//this sets the height of the document (how far the entire scroll will go)
$('div#node-1').parents('#content').height(16200);
//the top setting is where the object starts and the spd is how fast it moves
$('div#node-1, div#node-1-title').css('top',65).parallax({spd:.15});

The best bet to get this working the way you want is to start from the top and move down. Testing objects as you move down the page to get them just where you want.

Attached is the html file with the javascript you need to use this simple parallax function.
Parallax doc

Art in Lit is this new project I’m working on. It’s in the very early stages, but there’s something useful going on there. The plan is to create an index of artworks found in literature. This would be useful to students, teachers, and writers. Of course this will take a lot of time to document every artwork found in pieces of literature. So far just a few have been listed, and some not completely. But there’s good news.

You can help build the database. You like to read or want to be part of a fun, informative project that will help many? You can sign up for an account and add listings yourself, or once you’ve joined you can correct information already listed.

Eventually there will be forums to discuss the literature and the artworks. Find out more at www.artinlit.com.

Recently this amazing Chicago calligrapher (okay she’s my wife) told me she wanted a new website. So we set about creating something. She’s on a purple kick so we used purple for the design.

She wanted something fun and different on the homepage, so I used jQuery to create some cards coming out of some envelopes. It’s just a few layer images, and one moving up and down.

Also there’s a sample page, where the images are enlarged for easier viewing. Again, jQuery came to the rescue, in a way similar to Lightbox – my own design of course.

You can check out the design, or her calligraphy, at gracefulquill.com