白黒画像をマウスオーバーでカラーに
2016.04.25 Posted by Coding_team
こんにちは。ウェブラボ技術メモです。
画像のマウスオーバー時のエフェクトはこれまでもいくつか紹介してきましたが
フォトギャラリーなどにぴったりなエフェクトを今回はご紹介します。
まずは下記ページからファイルをダウンロードします
http://gianlucaguarini.github.io/jQuery.BlackAndWhite/
1.外部ファイル読み込み
head内にjqueryとjquery.BlackAndWhite.jsを読み込ませます。
|
1 2 |
<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による命令を書きます。
|
1 2 3 4 5 6 7 8 9 10 |
<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部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function(){ $('.bwWrapper').BlackAndWhite({ hoverEffect : true, webworkerPath : false, invertHoverEffect: false, //白黒→カラー（trueにするとカラー→白黒） intensity:1, speed: { fadeIn: 200, //フェードインのスピード fadeOut: 800 //フェードアウトのスピード }, onImageReady:function(img) { } }); }); |
4.CSS部分
画像を並べるスタイル等が別途必要になりますが、これだけのCSSで最低限の動きは実現できます。
|
1 2 3 4 |
.bwWrapper { position:relative; display:block; } |
今回作成したデモページはこちらです。
白黒の画像が並ぶ中で、マウスを合わせた画像だけカラーになります。
カラーから白黒に変更することも可能ですが、
マウスオーバーしている画像がひと目でわかりますし、白黒の中のカラーはコントラストの高い画像であるほど美しく映えると思います。
モダンブラウザではもちろん、IEは9から対応しています。
レスポンシブ対応もされており、スマホではタップするとカラーが変更されるようです。
他とは少し違ったギャラリーにしたいという時、導入してみてはいかがでしょうか。
以上、技術メモでした。
関連記事こちらの記事も合わせてどうぞ。
