概要
例えば横方向はposition:static、縦方向はposition:fixedのように見える動きを提供します。
ちょっと言葉だけでは分かりづらいので、デモをご覧ください。
ダウンロード
基本的な使い方
.gpFloatX()で横方向に、 .gpFloatY()で縦方向にのみスクロールするようになります。
$(elem).gpFloatX(); $(elem).gpFloatY();
デモ
デモ1 : 基本的なもの
Demo 1- 上部のメジャーは、画面を縦にスクロールしても移動しませんが、横にスクロールした場合は一緒にスクロールします。
- 左部のメジャーも同様です。
- 下部のフッターは座標計算時にスクロール量を確認し、もし要素ブロックの右端までスクロールしていたら、それ以上はスクロールしません。
デモ2 : バルーン
Demo 2- プラグインとしては当然ですが、複数の要素をまとめて指定する事もできます。
- 座標計算の再にスクロール量より一定の割合で変化させる事で、ゆっくりスクロールさせる事ができます。
- ゆっくりスクロールを複数あわせると、なんだか三次元な感じです。
リファレンス
.gpFloat([settings])
settings… {Object} 設定。以下のキーと値を持てる:direction… {String} 移動可能な方向。"x","y","xy"のいずれか。getLeft(originalX, scrollLeft, $el)… {Function} 横方向の座標を計算する関数。originalX… {Number} 要素の初期位置。scrollLeft… {Number} 現在のスクロール量。$el… {HtmlElement} 対象要素。
getLeft: function(originalX, scrollLeft, $el) { return originalX - scrollLeft; // default }getTop(originalY, scrollTop, $el)… {Function} 縦方向の座標を計算する関数。getLeftと同様。
.gpFloatX([settings])
settings… {Object} 設定。directionが必ず"x"になる意外は、.gpFloat([settings])のsettingsと同じ。
.gpFloatY([settings])
settings… {Object} 設定。directionが必ず"y"になる意外は、.gpFloat([settings])のsettingsと同じ。
その他
ライセンス
- MIT License
- 無償で利用できます。
- 転載や改造、再配布が可能です。
- コード内に記載の著作権表示は変更できません。
- どのような問題が発生しても、一切の保証はありません。
利用時に連絡は不要ですが、もしご連絡頂ければ、利用実績として掲載させて頂くかもしれません。
対応ブラウザー
- IE 8+
- Firefox
- Chrome
- Safari
- Opera