パララックスエフェクトによってスクロールに意味を持たせる動きが活発になっています。スクロールするとアニメーションしたり、色が変わったりするサイトもありますが、今回はまたちょっと違うアクションです。 crossfade.jsを使うと画像がぼかされて目立たなくなっていきます。シングルページのWebアプリケーションで効果的に使えそうです。

crossfade.jsの使い方

一番簡単な使い方は画像を指定するだけです。

$(function () {
  $('.crossfade').crossfade(options);
});

最初の表示です。ここからスクロールしていきます。

ちょっとぼやけてきました。

上までいくとぼやけが一番強くなります。

オプションとしてスタート、終了時の画像を指定します。crossfade.jsでは自動でぼかしを行っているのではなく、最初と最後の画像を指定して、その中間はCanvasで描画しているようです。画像だけでテキストはぼかされないのでご注意を。

crossfade.jsはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

crossfade.js mikefowler/crossfade.js