写真コンテンツは見せ方が大事です。単純に一覧として表示しているだけではよくありません。より印象づけるための手段として、ユーザアクションと関連づけるという方法があります。そうすることでオンデマンドな情報提供ができるようになります。 今回紹介するProgressive Image.jsはFacebookやMediumにインスパイアされた画像表示ライブラリになります。

Progressive Image.jsの使い方

表示直後です。画像はボケています。

スクロールしたりすることで画像がはっきりと表示されます。

実際の動きはこんな感じです。アニメーションしながらなのでより印象的です。

スクロールして画像が表示される場所までくるとぼかしが解除されてはっきりと表示されます。最初から普通に表示されている場合に比べて画像に目が引かれやすくなるはずです。遅延読み込みの一種ですが、ダミーの画像を表示する訳ではないので（画像はCanvasでぼかしている）、すぐに表示されるのが特徴です。

Progressive Image.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

CodePen - responsive-image craigbuckler/progressive-image.js: A lazy-loading progressive image similar to those seen on Facebook and Medium.