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!
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.
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.
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.