Yellow Fade Technique
This is a small JS file (fade.js), built for an internal project, that duplicates the “Yellow Fade Technique” found in the 37signals product Basecamp. The file is fairly self-explanatory. You define RGB values for your “base” color (by default, it’s a shade of yellow). You also define the “holding” speed and “fade” speed. To make an element fade you simply call the function fade(”name”) where “name” is the id of the element.
It’s nothing too fancy and has some limitations. Right now it fades from your “base” color to white only.
Feel free to improve upon this. As mentioned above, I originally wrote this for an internal application without the intent of expanding it much further than its current state.
Download fade.js
If you click on the button below, the background on the above text will flash yellow than fade.
Dude, YFT is amazing indeed !
Comment by Chinmay — October 13, 2006 @ 5:55 pm
Great job!! i’ve just got a question for u tho, does this work on Safari? or it only works on IE and Firefox?
Comment by Jess — December 31, 2006 @ 1:21 am
Yeah, it works fine in Safari.
Comment by Brian — December 31, 2006 @ 10:35 am
Nice. Thanks.
Comment by Marty — April 16, 2007 @ 12:58 am
Ive been looking for this for hours, its so cool you can use any tags!!! im using in a table thankyouuuuuuuu
Comment by Cody — December 2, 2007 @ 5:16 pm
What do you think about using compact JS-frameworks like mootools or others? It seems to me, that it is more convinient.
Comment by Kaiser Chiefs's fan — February 3, 2008 @ 6:32 am
I won’t swear to it but I don’t think mootools even existed when I originally wrote this script. Those kind of frameworks are fine but I worry that most of the time they’re overkill for what people’s true needs are.
Comment by Link — February 3, 2008 @ 11:06 am