[JS]使い方も簡単、画像をフェードで切り替える超軽量スクリプト -hoverFade

既存のページに導入するのも簡単な画像をフェードで切り替えるスクリプトをDan Wellmanから紹介します。

デモのキャプチャ

jQuery Plugin – hoverFade
デモ

デモは上記ページのヘッダのナビゲーション(上キャプチャ)とフッタのアイコンで動作しています。

デモのキャプチャ

フッタのアイコン

実装方法

  1. フェードで切り替える画像のエレメントに対して、hover時に画像が切り替わるように設定します。その際に使用するクラス名は「hover-css」が初期設定です(変更可能)。
    これはもしJavaScriptがオフの環境でも、ホバーがCSSで行われるようにするためです。
  2. 次にスクリプト用のクラスを用意します。初期設定は「hover-anims」で、「hover-css」と同様に画像が切り替わるように設定します。
    これはスクリプトで利用するクラスで、その際にCSSのクラスは削除されます。
  3. jquery.jsとhoverfade.jsを外部ファイルとして配置します。記述位置の理想はHTMLの終わりです。
  4. HTMLにさきほどのCSS用のクラスを記述します。
    また、初期設定を変更する場合はオプションを変更します。

HTML

スクリプトのオプション

オプションではクラス名やトリガーを変更できます。

newClass
プラグインによって加えられるクラス名
初期値:hover-anims
classToRemove
CSS用のクラス名、プラグインによって削除
初期値:hover-css
onClass
ホバーの影響を受けるか受けないか
初期値:on
trigger
ホバーのアニメーションのトリガー
初期値:a
faderTemplate
アニメーションするエレメント
初期値:<span />

sponsors

top of page

©2018 coliss