いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【 jQuery 】BlackAndWhite.js使ってみた

カラー画像を白黒にして、カーソルが乗った時に色をつけるカッコイイエフェクトにしてくれる「jQuery.BlackAndWhite」を使ってみました!↓DEMO かんたーん(つω`*)

使い方

<script src="jquery.BlackAndWhite.js"></script>

jQueryと、上記「jQuery.BlackAndWhite.js」を読み込む。

<p class="bwWrapper">
 <img src="画像パス" width="image width" height="image height" / >
</p>
<p class="bwWrapper">
 <img src="画像パス" width="image width" height="image height" / >
</p>

 「bwWrapper」クラスで画像を囲む。

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

 上記CSSを入れる。

<script>
jQuery(window).load(function(){
    jQuery('.bwWrapper').BlackAndWhite({
        hoverEffect : true, // hover時にカラーにする
        webworkerPath : false, // BnWWorker.jsのパス設定
        responsive:true, // レスポンシブ対応
        invertHoverEffect: false, // hover時と色を逆にするか
        intensity:1,
        speed: { 
            fadeIn: 200, // フェードイン
            fadeOut: 800 // フェードアウト
        }
    });
});
</script>

 上記設定を入れる。おわり(>ω<*) 追記:でも、IE7・・・(´・ω・`)<ちょっと調べないと!