I've written an extremely minimal landing page that animates the position of text links within a paragraph to form a simple navigation bar. You can see it at brickmedialab.com.
Unfortunately, for everyone not running Firefox that page will look horrible. Because of my inexperience with jQuery, I absolutely positioned my text links so they could be easily moved with a click(). Because browsers render text so differently, this results in some very broken text positioning in anything but Firefox.
Further, text-size is animated as part of the transition, which again looks great in FF, but terrible in WebKit browsers and (I assume) IE.
Here's what's going on at the moment:
$(function() {
$('a').attr('onclick', 'return false').attr('href', '#');
$('a').click(function() {
var go = $(this).attr('id');
$(this).css('color', '#404040');
$(this).blur();
$('p, h1').fadeTo(1200, '0', function() {
$('#work').animate({
bottom: '540px',
left: '0px',
fontSize: '1.5em',
fontStyle: 'normal'
}, 1400);
$('#about').animate({
bottom: '540px',
left: '20px',
fontSize: '1.5em',
fontStyle: 'normal'
}, 1400);
$('#hello').animate({
bottom: '540px',
left: '40px',
fontSize: '1.5em',
fontStyle: 'normal'
}, 1400, function() {
window.location = go;
});
$('h1').fadeTo('slow', '0', function() {
})
});
});
});
I'd really appreciate any thoughts on resolving these issues. When it comes to Javascript, I'm totally at sea.