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

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

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

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

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

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

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

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

2.コンテンツ部分

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

3.javascript部分

4.CSS部分

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

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

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

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

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

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

以上、技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。