画像ホバー時に白黒からカラーに表示できるjQueryのプラグイン「jQuery.BlackAndWhite」

公開日：2015/08/26

jQuery プラグイン

画像ホバー時に白黒からカラーに表示できるjQueryのプラグイン「jQuery.BlackAndWhite」

ホームページに掲載している写真をおしゃれにかっこよく見せたい時に活用できそうなjQueryプラグインを紹介します。

今回紹介するのは、画像をホバーした時に白黒からカラーに表示を切り替えることができる「jQuery.BlackAndWhite」というプラグインです。
カラーから白黒にも表示を切り替えることが可能です。

jQuery.BlackAndWhite

このプラグインはカラーと白黒の2つの画像を用意する必要がありません。
カラー画像一つ用意すればOKです。

下記に「jQuery.BlackAndWhite」プラグインを使用する時の手順を説明します。

「jQuery.BlackAndWhite」プラグインの使用方法

下記から「jQuery.BlackAndWhite」をダウンロードします。

https://github.com/GianlucaGuarini/jQuery.BlackAndWhite

ファイル読込

jQueryとダウンロードした「jquery.BlackAndWhite.js」を読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.BlackAndWhite.js"></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.BlackAndWhite.js"></script>

HTML

カラー画像を用意します。
白黒からカラーへ表示を切り替える要素に「class=”bwWrapper”」を記述します。

<div class="bwWrapper">
	<img src="img/img1.jpg">
</div>

</div>

CSS

先ほど指定したクラスに対して下記のスタイルを設定します。

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

.bwWrapper {

position:relative;

display:block;

}

JS

動作させたい要素に対し「jQuery.BlackAndWhite」を実行します。
下記はオプションを指定していない状態です。

<script>
$(function () {
	$('.bwWrapper').BlackAndWhite();
});
</script>

$(function () {

$('.bwWrapper').BlackAndWhite();

});

</script>

サンプル

「jQuery.BlackAndWhite」を使用したデモページを用意しました。
画像をホバーすると白黒からカラー、カラーから白黒に表示が切り替わります。

「jQuery.BlackAndWhite」プラグインを使用したデモページ

オプション

オプションの一部を記載します。

<script>
$(function () {
	$('.bwWrapper').BlackAndWhite({
		// エフェクト有無を設定
		hoverEffect : true,
		// エフェクトの順番を逆に設定
		invertHoverEffect : false,
		// フェードのスピードを設定
		speed : {
			fadeIn : 200,
			fadeOut : 800
		}
	});
});
</script>