An Ajax App undergoes multiple events; which warrant a spotlight? A spotlight can serve any of the following purposes:

Examples:

Popularised by 37Signals, yellow is becoming something of a standard for fading effects. In general, though, the colour has to take into consideration which element is affected, as well as surrounding elements and the page appearance in general.

Additionally, multiple colours can be used to good effect. For instance, each colour can be used to represent a different type of event. In a multi-user context, JotSpot Live illustrates how each user can be associated with a different colour, so their recent edits appear as distinctly-coloured fade effects.

Asking how long the spotlight lasts might seem a bit ridiculous for a pattern named "One-Second Spotlight". But the name, of course, only hints at one reasonable value. You'll have to decide on the precise duration of the overall effect and also how many transitions will take place in that time.

Considerations:

As far as transitions go, the trade-off is fairly clear: faster transitions will look smoother, but slow down the application. Is the user likely to leave your application in a background tab and only check it once an hour? If so, avoid slowing down the whole browser with high-granularity effects. Likewise if the application is already process-intensive.

This is an area where different browsers will act differently. For instance, what's the lowest possible transition time you can set? That will depend on the user's system and the browser in question. You can experiment with different parameters on the Time Spotlight Demo.

37Signals Backpack maintains items in a list (Figure 1.81, “Backpack”). When you click the Edit button, the read-only item morphs into a textarea. On saving, it becomes read-only again, and is accompanied by a yellow Fade Out effect. All quite fitting for the company that coined the term, "Yellow Fade Technique".

Figure 1.81. Backpack

chat.app shows text messages as you or other people enter them. Each new message is highlighted with a yellow Fade Out.

Digg Spy shows new stories as they appear on the web. Each time a block of new stories appear, they appear with a Fade Out effect, with the background shifting from grey to white.

Coloir is a slideshow application. Each time you click next, an animated "loading" icon appears, and a new photo fades in.

Odeo is a podcast subscription service. You can force Odeo to grab the latest feed for a podcast, and during the delay, the entire document fades. An effect like this can be achieved with a partially-transparent “Popup” element covering the whole document. It feels similar to the way Windows fades the entire screen when you're about to log out.

Scriptaculous is an excellent Javascript library, supporting many Ajax UI patterns. Its visual effects library is based on four fundamental effects:

Combining these leads to any number of animation sequences, and many of the useful sequence are prepackaged.

The visual effects demo provides many spotlight effects.

FAT is a library allowing easy scripting of a transition from one colour to another.

The Time Spotlight Demo lets the user set a few parameters and applies the corresponding effect ( Figure 1.82, “Flexible Fader Demo”). A fader object encapsulates the fading logic. The fade duration and transition interval are modifiable attributes:

    fader.durationTime = parseInt($("fadeDuration").value);
    fader.transitionInterval = parseInt($("transitionInterval").value);

Figure 1.82. Flexible Fader Demo

The application asks fader to fade the div as soon as it's been modified:

    function showCustomTime(text) {
      var customTimeLabel = $("customTimeLabel");
      customTimeLabel.innerHTML = text + "." + callingContext;
      fader.fade(customTimeLabel, $("startColor").value, $("endColor").value);
    }

fader then kicks off the first transition, passing in a timeSoFar parameter of zero. The function is simpler using an array of percentage color values, but hex is more common, so a simple conversion takes place:

    fade: function(element, startRGB, endRGB) {
      this.nextTransition(
        element, this.rgbToPercents(startRGB), this.rgbToPercents(endRGB),0);
    }

Each transition involves deciding how far along the fade it is, and calculating the corresponding color style using a linear interpolation (as explained in the Solution above):

  nextTransition: function(element, startColor, endColor, timeSoFar) {
    ...
    var currentColor = "rgb(";
    for (component=0; component<3; component++) {
      var currentComponent = Math.round(startColor[component] +
         proportionSoFar * (endColor[component] - startColor[component]));
      currentColor+=currentComponent + "%" + (component<2 ? "," : ")");
    }
    element.style.backgroundColor = currentColor;
    ...
  }

Then it increments timeSoFar and finishes the fade if fade time has expired:

    timeSoFar+=this.transitionInterval;
    if (timeSoFar>=this.durationTime) {
      this.durationTime+ "\n";
      element.style.backgroundColor = 
        "rgb("+endColor[0]+"%,"+endColor[1]+"%,"+endColor[2]+"%)";
      return;
    }
    var nextCall = function() {
      fader.nextTransition(element, startColor, endColor, timeSoFar);
    }
    setTimeout(nextCall, this.transitionInterval);

fader is coded for simplicity, and a couple of improvements would be possible. First, the repeated color calculation would be more effective if it worked on the per-transition delta instead of calculating the absolute color each time. Also, the timing could be adjusted to take into account the time taken to run the function itself.

The Time Scriptactulous Demo shows how easy it is to reuse an existing effects library. Here, the time displays show a Materialise effect when a new result appears. They transition from completely invisible (showing only the document background colour) to the appearance determined by their class's style.

The refactoring is trivial. Include the scriptaculous effects library, effects.js, and prototype.js, a general-purpose Javascript utility used by scriptaculous:

    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="effects.js"></script>

Then, as with the hand-built fader above, invoking the effect is a one-liner:

    new Effect.Appear("defaultTimeLabel");

“One-Second Mutation” and “One-Second Motion” are also used to draw attention to a significant event. One-Second Spotlight can be used as both a general attention device as well as to hint at a specific type of event, whereas those two patterns tend to be slightly more about depicting specific events. The effects can also be combnined, e.g. shrink an object as it fades away.

A change arising from a “Periodic Refresh” is often marked with a “One-Second Spotlight”.

A “Timeout” event, and any prior warnings, can be marked with a One-Second Spotlight. In community sites that show details about other users, the effect can also be used to mark changes to their online status.