ITエンジニア/デザイナ向けにオープンソースを毎日紹介

stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。

WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。


例です。スクロールさせるとリスト部の描画が滑らかに変化します。


3Dを使っている場合は特に奇麗です。


様々な変化があります。


スクロールは上から下、下から上の両方に対応しています。


ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。


デモ動画です。全部で13種類のアニメーションがあります。

stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅が変わるので、高速移動させたりするとよりダイナミックな変化が見られます。Webサイトにインパクトある表現を使いたい場合にぜひ。

stroll.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

stroll.jsが使いやすいのは長いリストが一覧表示されるような場面ではないでしょうか。単にスクロールするだけではどこまでたどったのか分かりづらいですが、表示されているものにイフェクトがかかると直感的になります。ユーザビリティが高まるはずです。

Webはこれまで一旦表示された後は変化しないものでした。それがAjaxやJavaScriptによってアクティブになってきています。より直感的なUIを実現するためにもユーザの操作を受けて画面の表示を変化させると言った要素を取り込んでいく必要があるでしょう。

stroll.js - CSS3 Scroll Effects

hakimel/stroll.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2