wrapScroll JavaScript Library

wrapScroll version 0.9.6

wrapScrollはブラウザのスクロールイベントと連動して、スクロールに同期するナビゲーション実装を簡単に実装するためのJavaScriptライブラリです。
ナビゲーションの移動処理に利用する以外にも利用できるように設計されています。

設置の方法

wrapScrollの最新版をダウンロードします。
(バージョン0.9以降は prototype.js は必要ありません、prototype.js、mootools.js、jQueryなどのフレームワークに影響されずご利用いただけます。)

1. HTMLヘッダに以下を記述します
ご利用の環境に合わせてURLパスは変更してください

<script type="text/javascript" src="./wrapscroll.js"></script>

2. JavaScriptを記述します
スクロール同期ナビゲーション指定は、以下の記述でwrapScrollオブジェクトを作成します。

<script type="text/javascript">
   new wrapScroll ("movable element id");
</script>

3. HTMLタグへid属性を記述します
HTML中の移動処理を行う部分へid属性(id="name")を指定します。

<div id="name" ...

4. スタイルシート(CSS)を記述します(任意)
wrapScrollは初期化時にスタイル属性を自動的にposition:absoluteに設定します。スタイルシートであらかじめ指定すると、表示開始の位置を変更することが出来ます。

#name { position:absolute; top:100px; }

動作サンプル

リファレンス

JavaScriptコードを記述して、wrapScrollの初期化とオプションを制御することができます。利用目的にあわせて、それぞれ必要なコードを作成してください。

1. wrapScrollオブジェクトの作成 (必須)
wrapScrollオブジェクトを作成・初期化を行います、オプションなど指定が無い一番簡単な記述方法です。

new wrapScroll('element id');

2. 移動範囲を指定する
2番目のパラメータは省略できます。省略した場合1番目のパラメータで指定した親Nordが自動的に割り当てられます。下記例では、"parent-id" の領域が "element-id" の移動できる範囲となります。

new wrapScroll('element-id', 'parent-id');

3. 移動範囲を指定＋配置オプション
3番目のパラメータを指定すると、移動できる範囲が、指定した要素の下に配置されるようになります。"element-id" のTOP位置が、"relative-id”の状態に依存し、サイズ変更など発生しても常に下に配置させることができます。

new wrapScroll('element-id','parent-id','relative-id');

4. 上マージンの指定 (プロパティ)
上部のマージンをpixel単位で指定することができます。デフォルト値 0

var obj = new wrapScroll('element-id','parent-id');
obj.marginTop = 100;

5. 下マージンの指定 (プロパティ)
下マージンを指定をpixel単位ですることができます。デフォルト値 0

var obj = new wrapScroll('element-id','parent-id');
obj.marginBottom = 50;

6. インターバル周期の変更 (プロパティ)
スクロール状態チェックするタイミングを変更できます。デフォルト値 500

var obj = new wrapScroll('element-id','parent-id');
obj.Interval = 700;

7. エフェクト周期の変更 (プロパティ)
移動エフェクトの周期を指定します。デフォルト値 60
数値が大きいほど遅くなり、小さいほど早くなります。おおよそ180～30が適正範囲です。

var obj = new wrapScroll('element-id','parent-id');
obj.Duration= 100;

8. エフェクト処理の変更 (関数)
移動エフェクトの処理をオーバーライドします。1番目のパラメータには独自に作成したエフェクトの計算処理メソッドを指定します。2番目のパラメータはエフェクトの周期 Duration の数値を指定でき、省略することもできます。省略した場合、現在セットされているエフェクト周期が参照されます。

var obj = new wrapScroll('element-id','parent-id');
obj.setTween(method, 100);

詳しい利用方法とサンプルはエフェクト リファレンスを参照してください。

対応ブラウザ

  • InternetExplore 6.x, 7.0 or later
  • Firefox 1.5, 2.0, 3.0 or later
  • Opera 9.x or later
  • Safari 1.2 or later, Safari3.0 for Windows

ライセンス

  • The wrapScroll is licensed under a Creative Commons License. It is provided "as is" and without warranty of any kind.
  • 個人利用（非営利）の場合無償でご利用いただけます。商用利用、またはカスタマイズをしての利用は $30 (3,500円) ライセンスを取得してください。ライセンスは以降のバージョンにも適用されます。
  • ライセンスは利用するサイトのドメイン単位での登録をお願いします。利用するサイトドメインが複数の場合、それに応じた数のライセン ス登録をお願いいたします。
  • 日本国内の送金は銀行振り込みも受け付けております、メールにてお問い合わせください。

Download

Version logs

  • 2008-08-04 - ver 0.9.6 Bug fix.
  • 2007-07-01 - ver 0.9.5 Bug fix, update example code.
  • 2007-06-06 - ver 0.9.0 Added new parameters, code optimization.
  • 2007-06-01 - ver 0.8.0 Development only. change core.
  • 2007-04-05 - ver 0.7.0 Bug fix.
  • 2007-03-12 - ver 0.6.0 Added new parameters.
  • 2007-03-05 - ver 0.5.0 First release.

サポート

wrapScrollのサポートはメールで受け付けております。バグレポートや機能要望などございましたら、ご連絡ください。 youmos.com@gmail.com

AddThis Social Bookmark Button