JavaScript

Yellow Fade の実装サンプル

投稿日:2019年7月29日 更新日:

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 のサンプル

4. 参考

📂-JavaScript

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScript

【JavaScript】 async / await の使い方

本サイトの JavaScriptで一定時間待ってから処理を開始する方法 でも少し使ったのですが、JavaScript の async / await の使い方についてこちらのページにまとめておきます。 …

JavaScript

JavaScript の静的インポートと動的インポート

目次1. JavaScript の 2種類のインポート機能(概要)1. モジュール側2. 呼び出し側静的インポート動的インポート2. 静的インポート1. この機能の呼び名2. 特徴3. 仕様4. ブラ …

Web Security

JavaScript の alert は CPUにたいした負荷を掛けないしタブを閉じれば終了します

以下の話題について書きます。 不正プログラム書き込み疑い補導 03月04日 20時04分 クリックすると同じ画面が表示され、消えなくなる不正なプログラムのアドレスをインターネットの掲示板に書き込んだと …

JavaScript

JavaScriptで一定時間待ってから処理を開始する方法

目次1. はじめに2. 手順(async function版)3. 手順(Promise をそのまま使った版)4. いつ使うのか?参考 1. はじめに JavaScriptで一定時間待ってから何か処理 …

JavaScript

JSON.stringify() の引数に関する忘備録

JavaScript でよく使う JSON.stringify()メソッドですが、第二引数と第三引数の意味を忘れがちなので本ページに記録しておきます。