crossfade.js – スクロールで画像をぼかすエフェクト
パララックスエフェクトによってスクロールに意味を持たせる動きが活発になっています。スクロールするとアニメーションしたり、色が変わったりするサイトもありますが、今回はまたちょっと違うアクションです。 crossfade.jsを使うと画像がぼかされて目立たなくなっていきます。シングルページのWebアプリケーションで効果的に使えそうです。
crossfade.jsの使い方
一番簡単な使い方は画像を指定するだけです。
$(function () {
$('.crossfade').crossfade(options);
});
オプションとしてスタート、終了時の画像を指定します。crossfade.jsでは自動でぼかしを行っているのではなく、最初と最後の画像を指定して、その中間はCanvasで描画しているようです。画像だけでテキストはぼかされないのでご注意を。
crossfade.jsはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。