Googleマップをはじめて操作した時の驚きは今も覚えています。マウスでドラッグして無制限に動かせたり、マウススクロールでズームイン、ズームアウトさせることができました。この凄さに驚いた開発者がこぞって同じような操作ができるライブラリを開発しました。 Scrollerはその一つの試みで、HTMLに加えてCanvasでもズームイン、ズームアウト操作ができるライブラリです。

Scrollerの使い方

こちらはDOM版。左側の四角の範囲でスクロールしたり、拡大/縮小ができます。

こちらがめいっぱい縮小したところ。

縮小すると文字がぼやけています。

拡大しても文字がぼやけています。

Canvas版。こちらはくっきりと表示されています。

パンしてもくっきり。

Scrollerはズームイン/ズームアウトの他、スクロールができます。さらにXまたはY軸方向のみに固定したり、スナップを有効にしてグリッドに合わせて移動させることもできます。Pull to Resreshもサポートしているのでデスクトップだけでなくスマートフォンでも活用できるでしょう。

ScrollerはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

popham/scroller @ GitHub popham/scroller