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 による HTTP(S)リクエスト送信のいろいろな書き方

目次1. はじめに2. JSON を取得するコード(1) axios (XMLHttpRequest) (基本形)(2) axios (XMLHttpRequest) (async/await を使用 …

JavaScript

Webページ上でボタンを押したときに、必要な JavaScriptコードを読み込んで実行するサンプル

Webページ上でボタンを押したときに、必要な JavaScriptコードを読み込んで実行するサンプルコードを紹介します。

JavaScript

Node.js のバージョン管理ツール nvm の使い方

目次1. nvm とは?2. nvm の導入1. すでに nvm がインストールされているかチェックする2. nvm をインストールします3. Node.js のインストール4. nvm の便利なコマ …

JavaScript

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

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

JavaScript

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

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