東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2016.04.25 Posted by

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

画像のマウスオーバー時のエフェクトはこれまでもいくつか紹介してきましたが
フォトギャラリーなどにぴったりなエフェクトを今回はご紹介します。

まずは下記ページからファイルをダウンロードします
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から対応しています。
レスポンシブ対応もされており、スマホではタップするとカラーが変更されるようです。
他とは少し違ったギャラリーにしたいという時、導入してみてはいかがでしょうか。

以上、技術メモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278