仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

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

公開日:

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」を読み込みます。

 

 

HTML

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

 

 

CSS

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

 

 

JS

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

 

 

サンプル

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

 

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

 

 

オプション

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

 

 

 

まとめ

今回はホームページに掲載している写真をマウスオーバーした時に白黒からカラーに表示を切り替えることができるjQueryのプラグイン「jQuery.BlackAndWhite」を紹介しました。

 

ホームページのデザインによってはこのようなエフェクトを取り入れて写真をおしゃれに見せるというのも悪くないかと思います。
ただ写真を掲載するよりも相手に与える印象が変わるかもしれないですね。

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00