スクロールによってリストの表示をダイナミックに変化させる「stroll.js」
stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。
WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。
例です。スクロールさせるとリスト部の描画が滑らかに変化します。
3Dを使っている場合は特に奇麗です。
様々な変化があります。
スクロールは上から下、下から上の両方に対応しています。
ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。
stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅が変わるので、高速移動させたりするとよりダイナミックな変化が見られます。Webサイトにインパクトある表現を使いたい場合にぜひ。
stroll.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
stroll.jsが使いやすいのは長いリストが一覧表示されるような場面ではないでしょうか。単にスクロールするだけではどこまでたどったのか分かりづらいですが、表示されているものにイフェクトがかかると直感的になります。ユーザビリティが高まるはずです。
Webはこれまで一旦表示された後は変化しないものでした。それがAjaxやJavaScriptによってアクティブになってきています。より直感的なUIを実現するためにもユーザの操作を受けて画面の表示を変化させると言った要素を取り込んでいく必要があるでしょう。