fat.js Fade Anything
I just implemented this at work. It’s a really cool javascript class that’s used in the Wordpress admin panel (the fade feedback you get after editing a file’s code via admin).
It works by adding class="fade-#FFFF66" to any element on the page. Documentation can be found at http://www.axentric.com/aside/fat/. I’m surprised I didn’t know this before, but I also learned you can apply two classes to any one element by simply putting a space in between each class, like class="class1 class3".
I actually implemented it a little differently because I wanted the fade to be triggered by an event other than load. I called the fade_element method of the Fat class, like so: Fat.fade_element(id, fps, duration, from, to);
It should be self-explanatory, but id is the element’s id, fps is frames per second, duration is the time (in milliseconds), from is the beginning color and to is the final color of the element. Only the id is mandatory. Defaults for the rest of the arguments include 30 fps, 3 seconds (3000 milliseconds), from yellow (#FFFF33), and to the id’s orginal background color.
From a design standpoint, the fade is unique because it offers a compromise between and alert box and a printed message. Initially, there is a significant color change, on the page, but it slowly fades after your attention has been grabbed and is no longer needed. It’s quite similar to desktop email updates from Outlook and Gmail.
But really, this file is called Fade Anything because you can really fade anything on the page. It doesn’t just have to be used for alerts and messages. Use it to make an animated sunset on your page. Be creative.