[JS]ドラッグベースのいろいろなインターフェイスが実装できるスクリプト -Dragdealer JS
Post on:2010年6月14日
sponsors
ドラッグ操作を利用したインターフェイスを簡単に実装できるスクリプトを紹介します。
スクリプトはjQueryなど他のスクリプトに依存せずに動作し、圧縮版は12KBと軽量なものになっています。
以下に公開されているデモを紹介します。
シンプルなスライダー
オプション無しで動作するシンプルなスライダー。
赤いパネルがグレーの枠内でのみドラッグで移動できます。
スクロールバー
ドラッグ操作で動作するオリジナルのスクロールバー。
赤いパネルをドラッグで移動すると、それに伴いコンテンツもスクロールします。
テキストの拡大
テキストを拡大表示する拡大鏡。
赤いパネルをドラッグすると決められた位置に停止し、テキストが拡大します。こういったコントロールするという操作はこのスクリプトが最も得意とするものです。
コントロール機能をもったスライドショー
画像とテキストの両方で操作が可能なスライドショー。
左の画像をドラッグすると、それに伴いテキスト側の枠も移動します。テキスト側でもスライドショーの操作は可能です。
マスクを利用したコンテンツ
上記のスライドショーを進化させたもの。
決められた範囲のみに表示し、範囲外にドラッグするとバウンスのアニメーションで戻ります。
sponsors
