[JS]背景やテキストの色を少しずつ変更するスクリプト -fader.js

leigeberのエントリーから、背景やテキストやボーダーの色を、指定色から指定色に少しずつ変更するスクリプトの紹介です。

JavaScript Color Fading Scriptのキャプチャ

JavaScript Color Fading Script
デモページ

デモには、下記の4つがあります。

  • ホバーすると、背景の色をフェード。
  • クリックすると、背景の色をフェード。
  • ホバーすると、テキストの色をフェード。
  • ホバーすると、ボーダーの色をフェード。

fader.jsの動作環境は、IE6/IE7, Firefox, Opera and Safariとなっており、jQueryやPrototypeなどの他のスクリプトに依存せずに動作する軽量(約2KB)のスクリプトです。

実装も簡単で、「fader.js」を外部スクリプトとして配置し、下記のように指定します。

1番目
id名
2番目
「background」「text」「border」を指定
3番目
最初の色
4番目
最後の色
5番目(オプション)
色の分割数
6番目(オプション)
色の移行スピード

top of page

©2017 coliss