Yellow Fade の実装サンプル

1. Yellow Fade とは？
2. 実装サンプル
3. デモページ
4. 参考

1. Yellow Fade とは？

Webページ上で何か操作したとき、その操作によって画面上のどこが変化したのか分かりづらい場合があります。そんなとき、変化が起きた部分の背景色を一時的に変化させると親切です。これを JavaScript で実装した機能のことを「Yellow Fade」とか「Yellow Fade Technique (YFT)」と呼びます。呼びますというか、呼んでいた時期がありました（今は別の呼び方があるのでしょうか？）。当たり障りのない色である「黄色」が使われていたため、このような名前だったと思います。

今ではすっかりこの名前を聞くこともなくなりましたが、地味に便利だと思いますので実装サンプルを紹介します。

参考：Web Interface Design Tip: The Yellow Fade Technique (Signal vs. Noise)

2. 実装サンプル

いろいろな実装があるかと思いますが、現在だと CSS の @keyframes を使うのがラクそうです。

HTML

画面上にボタンを用意し、これを押すとこのボタンの背景色が一時的に黄色になるようにします。

<button id="btn1">クリックしてください！</button>

CSS

CSS の記述に関しては、CSS – Yellow Fade Technique – Kamran Ahmed に分かりやすいコード例がありましたので、一部変更して利用させてもらいます。

@keyframes yellowfade {
    from { background-color: yellow; }
    to { background-color: transparent; }
}
.yellow-fade {
    animation-name: yellowfade;
    animation-duration: 2.0s;
}

背景色が黄色(yellow)の状態から、透明(transparent) に変化する @keyframes を用意しておき、これを利用するCSSクラス yellow-fade を定義しています。

JavaScript

あとは JavaScript を使い、目的のHTML要素に対してこのCSSクラスをセットしたり外したりするだけです。コメントに、ちょっとした説明をつけておきました。

// 画面上のDOMオブジェクトが生成された後に呼ばれる関数を登録します
window.addEventListener('DOMContentLoaded', (event) => {
  // ボタンのクリックイベント発火時に実行する関数を登録します
  document.querySelector('#btn1').addEventListener('click', function () {
    // ボタン(this)に、CSSのクラスを追加します
    this.classList.add('yellow-fade');
    // このクラスを外す処理を2秒後に実行させます
    setTimeout(function() {
      this.classList.remove('yellow-fade');
    }.bind(this), 2000);
  });
});

ボタンを表すDOMオブジェクトが生成された後であれば、クリックイベントを登録できますので、DOMContentLoaded イベントを使っています。load イベントにする必要はありません。※ load イベントはレンダリング（描画）が終わった後に発生します。
ボタンに対するイベントリスナー関数を function(){} という無名関数で登録しています。これを () => {} というアロー関数で登録したい場合は、this の扱い方が変わりますのでコードの変更が必要です（アロー関数を使う必要はないと思いますが）。

3. デモページ

デモページを用意しました。

デモページ

🔗 Yellow Fade のサンプル