archive: September 2010


Header is now CSS3/HTML5

Posted by Shane

I get a lot of complements on my flash header. Particularly the second by second update of the “gradient tween” that goes between that syncs up with the real time of day. So as you are reading this now, look at the header on my site (Flash enabled?). Does the time period pretty much match what is outside at the moment? It should be pretty close to what your experiencing outside.

This 24-loop header is great because you also see the stars “rise” and “set”, different seasons, and even the animated butterflies that pop out during the summer time. Overall the header is the most advanced thing that I can find on the web that does this type of animation. There is one catch to viewing this header: You have to have flash enabled and/or be on a flash compatible device. Do’h!

Yes. I do get the occasional email that I should not be using flash and that it’s outdated and I should be doing it all with javascript and CSS, particularly CSS3 even when it was still in it’s early alpha stages. So I pretty much stopped productions a while a ago on the weather system I was building for the flash header to move onto a javascript, css3, and HTML5 version of the header that will work in every browser. So for the past two weeks I been converting all the actionscript that powers the header (sans the Debug Class) into javascript.

Today I have a working model stored locally where it sets the times based on the location and calculates the 3 gradients needed to generate the header. A few bugs arrived in the process, but one in particular is given me a headache.

  • The gradient as the “time” changes doesn’t seem to be giving me better gradient pattern.

I have a few suspect areas particularly with the jQuery easing functions that I am using. ActionScript/Flash as an advantage does allow for great color manipulation than any other tool out there, but I am working on fixing this problem up.

Once I get a working header, I’ll create a video of the preview since I don’t want to publish it live with the .js code open yet. Laying down the images on top of the “header (the hill, the bunny, and the site logo) will be simple CSS3 postilion techniques. Once I understand the gradient problem, adding the stars back in will not be a problem because the stars now are basically a tween that gets eased in and out from where ever it was placed. The code will even be less bulky than the flash version.

What does this mean for the rabbit hole? You can have the entire site work like you like to see it on all devices and it will load faster as well! Over 120kb smaller and that’s without the javascript compressed! So in the mean time enjoy the flash header for a little while longer. Hopefully by this time next week the site will be live with the new header!

P.S. I am not going to bring it live until the star animation stuff is complete as well since this is really important to me.

Update 9/19/10: It looks like it was the “math” that figured out how fast the colors change in transition. I have patch the code and the header is now going through a 24 hour simulation.

The Header in CSS

Update 9/19/10 @ 3:52pm: This is the header in CSS3/HTML on my local host. The hills are a sprite and ‘the rabbit hole’ and the rabbit are separate images.

Comments 0

Commenting is closed

No Comments Yet