leigeberのエントリーから、背景やテキストやボーダーの色を、指定色から指定色に少しずつ変更するスクリプトの紹介です。
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番目(オプション)
- 色の移行スピード
Post on:2008年5月7日
