[JS]画像はそのままで、カラートーンや不透明度のアニメーションを加えるスクリプト -MyFadeOverImage

画像自体をPhotoshopなどでレタッチする必要なく、カラートーンや不透明度の変更をフェードのアニメーションで加えるjQueryのプラグインを紹介します。

My Fade Over Image
デモページ

[ad#ad-2]

My Fade Over Imageの実装

カラートーンや不透明度は、簡単に設定できます。

MyFadeOverImageの基本書式

$("#demo1 img").MyFadeOverImage({
  normalAlpha:0.9,
  hoverAlpha: 1,
  normalToneColor:"#000" 
});

normalAlpha

通常時の不透明度

hoverAlpha

ホバー時の不透明度

normalToneColor

通常時のカラートーン

実装も簡単で、「jquery.js」と当スクリプトを外部ファイルとし、jQueryのセレクタで画像を指定し、不透明度とカラートーンを指定します。
下記は、各デモとその指定方法です。

Black（デフォルト）

JavaScript

$("#demo1 img").MyFadeOverImage({
  normalAlpha:0.9,
  hoverAlpha: 1,
  normalToneColor:"#000" 
});

Smog

JavaScript

$("#demo2 img").MyFadeOverImage({
  normalAlpha:0.5,
  hoverAlpha: 1,
  normalToneColor:"#fff"
});

Orange

JavaScript

$("#demo3 img").MyFadeOverImage({
  normalAlpha:0.5,
  hoverAlpha: 1,
  normalToneColor:"#FFCEA0"
});

Tea

JavaScript

$("#demo4 img").MyFadeOverImage({
  normalAlpha:0.5,
  hoverAlpha: 1,
  normalToneColor:"#FF723F"
});

対応ブラウザ

MyFadeOverImageの対応ブラウザは下記の通りです。

• IE
• Firefox
• Chrome
• Safari
• Opera

[ad#ad-2]