白黒画像をマウスオーバーでカラーに

こんにちは。ウェブラボ技術メモです。

画像のマウスオーバー時のエフェクトはこれまでもいくつか紹介してきましたが

フォトギャラリーなどにぴったりなエフェクトを今回はご紹介します。

まずは下記ページからファイルをダウンロードします

http://gianlucaguarini.github.io/jQuery.BlackAndWhite/

1.外部ファイル読み込み

head内にjqueryとjquery.BlackAndWhite.jsを読み込ませます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.BlackAndWhite.js"></script>

2.コンテンツ部分

今回は画像のギャラリーのようにするため、htmlには下記のように画像のリストを作成します。
aタグにclass=”bwWrapper”を設置し、このclassに対してjsによる命令を書きます。

<ul id="wrap">
	<li><a href="#" class="bwWrapper"><img  src="img/Hydrangeas.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="img/Desert.jpg" width="300" height="225" /></a></li>
	<li class="last"><a href="#" class="bwWrapper"><img  src="img/Chrysanthemum.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="img/Jellyfish.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="img/Koala.jpg" width="300" height="225" /></a></li>
	<li class="last"><a href="#" class="bwWrapper"><img  src="img/Lighthouse.jpg" width="300" height="225" /></a></li>
	<li><a href="#" class="bwWrapper"><img  src="img/Penguins.jpg" width="300" height="225" /></a></li>
	<li class="last"><a href="#" class="bwWrapper"><img  src="img/Tulips.jpg" width="300" height="225" /></a></li>
</ul>

3.javascript部分

$(function(){
	$('.bwWrapper').BlackAndWhite({
        hoverEffect : true,
        webworkerPath : false,
        invertHoverEffect: false, //白黒→カラー（trueにするとカラー→白黒）
        intensity:1,
        speed: {
            fadeIn: 200, //フェードインのスピード
            fadeOut: 800 //フェードアウトのスピード
        },
        onImageReady:function(img) {
        }
    });
});

4.CSS部分

画像を並べるスタイル等が別途必要になりますが、これだけのCSSで最低限の動きは実現できます。

.bwWrapper {
    position:relative;
    display:block;
}

今回作成したデモページはこちらです。

白黒の画像が並ぶ中で、マウスを合わせた画像だけカラーになります。

カラーから白黒に変更することも可能ですが、
マウスオーバーしている画像がひと目でわかりますし、白黒の中のカラーはコントラストの高い画像であるほど美しく映えると思います。

モダンブラウザではもちろん、IEは9から対応しています。

レスポンシブ対応もされており、スマホではタップするとカラーが変更されるようです。
他とは少し違ったギャラリーにしたいという時、導入してみてはいかがでしょうか。

以上、技術メモでした。