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

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

使用方法
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>

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

sponsors

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

記事作成:
記事URL:

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