[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]

sponsors

top of page

©2024 coliss