Yellow Fade のサンプル

1. このページの目的

Yellow Fade のサンプルをこのページで試します。

Yellow Fade とは？

Webページ上で何か操作を行ったときに、「変化が起きた部分の色を、JavaScriptを使って一時的に黄色にする」機能のことを言います。

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

コード

HTML

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

CSS

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

※ 参考：CSS - Yellow Fade Technique – Kamran Ahmed

JavaScript

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelector('#btn1').addEventListener('click', function () {
      this.classList.add('yellow-fade');
      setTimeout(function() {
        this.classList.remove('yellow-fade');
      }.bind(this), 2000);
    });
});

デモ

※ 本ページにはありませんが、「ボタンの押下によって変化する箇所」があればそちらの色を変えたほうが良いでしょう。