画像マウスオーバー時に白黒とカラーを切り替えるjQueryプラグイン「jQuery.BlackAndWhite」!

2016/08/05

こんにちは。
今回は画像マウスオーバー時に白黒とカラーを切り替えるjQueryプラグイン「jQuery.BlackAndWhite」!です。

白黒画像とカラー画像を画像ホバー時に表示切り替えできるjQueryプラグインを紹介します。
用意するのは、カラー画像のみで大丈夫ですよ。

画像マウスオーバー時に白黒とカラーを切り替えるjQueryプラグイン「jQuery.BlackAndWhite」!

jQuery.BlackAndWhite

jquery-blackandwhite

 

jQueryプラグイン「jQuery.BlackAndWhite」をダウンロードしてみよう!

https://github.com/GianlucaGuarini/jQuery.BlackAndWhiteにアクセスし、ボタンをクリックしてダウンロードします。

 

jQueryプラグイン「jQuery.BlackAndWhite」を設置してみよう!

jQuery本体とjQuery.BlackAndWhite.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。
先程指定した「bwWrapper」というクラスを付けますよ。

 

CSSを記述します。

 

jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック
jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック

 

いかがでしたか。手軽に実装できて、フェード効果もできるのでいいですね。
以上で画像マウスオーバー時に白黒とカラーを切り替えるjQueryプラグイン「jQuery.BlackAndWhite」!でした。

topへ戻る