[JS]ドラッグベースのいろいろなインターフェイスが実装できるスクリプト -Dragdealer JS

ドラッグ操作を利用したインターフェイスを簡単に実装できるスクリプトを紹介します。

デモのキャプチャ

Dragdealer JS
デモ

スクリプトはjQueryなど他のスクリプトに依存せずに動作し、圧縮版は12KBと軽量なものになっています。

以下に公開されているデモを紹介します。

シンプルなスライダー

デモのキャプチャ

オプション無しで動作するシンプルなスライダー。
赤いパネルがグレーの枠内でのみドラッグで移動できます。

スクロールバー

デモのキャプチャ

ドラッグ操作で動作するオリジナルのスクロールバー。
赤いパネルをドラッグで移動すると、それに伴いコンテンツもスクロールします。

テキストの拡大

デモのキャプチャ

テキストを拡大表示する拡大鏡。
赤いパネルをドラッグすると決められた位置に停止し、テキストが拡大します。こういったコントロールするという操作はこのスクリプトが最も得意とするものです。

コントロール機能をもったスライドショー

デモのキャプチャ

画像とテキストの両方で操作が可能なスライドショー。
左の画像をドラッグすると、それに伴いテキスト側の枠も移動します。テキスト側でもスライドショーの操作は可能です。

マスクを利用したコンテンツ

デモのキャプチャ

上記のスライドショーを進化させたもの。
決められた範囲のみに表示し、範囲外にドラッグするとバウンスのアニメーションで戻ります。

sponsors

top of page

©2018 coliss