« The Ajax Experience
A year later… »

Yellow Fade Technique, Revisited

In early 2004, 37 Signals popularized the Yellow Fade Technique. Lots of variations followed. Recently, I’ve had to use the YFT on one of my projects but I didn’t like any of the existing alternatives including 37 Signal’s own YFT implementation.  And so, I offer my variation to the YFT.

// Yellow fade technique
var yft = {
  _shade: {1:'ff', 2:'ee', 3:'dd', 4:'cc', 5:'bb', 6:'aa', 7:'99'},
  fadeIn: function(e,i) {
      if (i >= 1) {
      var elem = $(e)
      if (elem) elem.style.backgroundColor = '#ffff' + this._shade[i];
      else return;
        if (i > 1) {
        i -= 1;
          setTimeout(”yft.fadeIn(’”+elem.id+”‘,”+i+”)”, 200);
        } else {
        i -= 1;
        setTimeout(”yft.fadeIn(’”+elem.id+”‘,”+i+”)”, 200);
        elem.style.backgroundColor = “transparent”;
      }
    }
  }
}

Note, that this does require the use of Prototype.

This entry was posted on Tuesday, February 7th, 2006 at 2:35 PM PST and is tagged with , , . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Yellow Fade Technique, Revisited”

  1. Yellow fade technique at immobilized.co.uk Says:
    February 23rd, 2006 at 12:39 PM PST

    [...] manalang.com // Yellow fade technique var yft = { _shade: {1:’ff’, 2:’ee’, 3:’dd’, 4:’cc’, 5:’bb’, 6:’aa’, 7:’99′}, fadeIn: function(e,i) { if (i >= 1) { var elem = $(e) if (elem) elem.style.backgroundColor = ‘#ffff’ + this._shade[i]; else return; if (i > 1) { i -= 1; setTimeout(”yft.fadeIn(’”+elem.id+”‘,”+i+”)”, 200); } else { i -= 1; setTimeout(”yft.fadeIn(’”+elem.id+”‘,”+i+”)”, 200); elem.style.backgroundColor = “transparent”; } } } } [...]

  2. Waterfall Web » Blog Archive » The Yellow Fade Technique (YFT) Says:
    March 8th, 2006 at 2:27 PM PST

    [...] The Yellow Fade Technique, Revisisted. I don’t know how or why this is better than the original. But it’s revisited, so it must be, I guess! [...]

  3. Maria loves pictures Says:
    May 25th, 2006 at 2:00 PM PDT

    Great technique. I like the efficency of this clean solution. Great job.

  4. Jimmy Willson Says:
    July 6th, 2006 at 8:49 PM PDT

    Don’t you think that original was the better one. Then why this has been revisited. Is something better is gonna happen!

Leave a Reply