For way too long I’ve had a simple redirect from thunderkick.us to thunderkick.us/blog, as the blog was really the only thing I was updating at all. Over the last few weeks I’ve spent some time, though, putting together a new homepage that aggregates some of the various content found in the blog, and surfaces it in a user-friendly way (I like to think.)
I created the jQuery animation you’ll see (if you use IE, for the time-being) using Glimmer: A jQuery Interactive Design Tool, which Karsten Januszewski created for the MIX Online team, here at Microsoft.
I launched it today, but have to work out two annoying bugs:
- In IE7 & 8 when you animate transparent .pngs, the browser tends to render the pngs horribly. They look all choppy and ridiculous. I’ve done some searching and have found that both I’m not the only one that has experienced this problem as well as absolutely no reasonable solution. I guess I’m going to have to re-render these graphics as .jpgs and try and align them perfectly with the background to give the appearance of transparency. Ugh.
- In Firefox and Safari the main lede animation doesn’t run at all, and all you get is the last frame. Now, I’ve coded the CSS to ensure that this last frame is the one users would see if they couldn’t handle JavaScript or have it turned off, but it doesn’t even run if the user has it enabled. This problem is totally vexing, specifically because when trying to troubleshoot the problem locally, Firefox renders the animation as expected.
The unfortunate solution: use Google Chrome. Chrome renders the graphics and animations correctly.
I’ll write again as I figure out the solution to the Firefox and IE problems.
UPDATE: So I tweeted the problem with the jQuery not running in Firefox and Safari and @jongalloway looked at my code and noticed I was using backslashes instead of forwardslashes ( \ vs / ) in the script paths. I’m a total dumbass. That fixed it. Now to fix the transparent .pngs and I’m good-to-go.
::: systim out :::