スクロールした際に画像をぼかすことができるjQueryプラグイン「crossfade.js」

スクロールした際になんらかのエフェクトがあると注目を浴びさせることができると思います。
jQueryプラグインのcrossfade.jsを利用すると画像をぼかして、印象的にすることが可能です。

sponsors

使用方法

crossfade.jsからファイルをダウンロード。

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="crossfade.jquery.js"></script>
<script>
$(function(){
  $('.crossfade').crossfade();
});
</script>
  
上記を記述したら対応させたい場所に以下のように書けば完成です。

    <div class="crossfade" data-crossfade-start="初期画像パス" data-crossfade-end="フェードさせる際の画像パス">
      コンテンツ
    </div>

サンプル

ページをスクロールさせてみてください。
Javascriptサンプルページ一覧
skuare.net

sponsors