jQuery:画面の位置を自動で調整する「windows.js」

jQueryの「windows.jsプラグインを使用してみました。
windows.js」プラグインは画面のスクロール位置自動調整してくれるプラグインです。

jquery_windows_1

スクロール位置が中途半端な場合、指定した位置まで画面が移動して自動補正します。

下記のような画面の途中でスクロールを止めます。

jquery_windows_2

指定した秒数が経過したら、位置が自動でスクロールするのです。

jquery_windows_3

windows.js」プラグインは下記よりダウンロードできます。

http://nick-jonas.github.io/windows/

下記にjQueryの「windows.jsプラグインの使用して、
画面のスクロール位置自動補正させた際の使用方法をメモします。


「windows.js」プラグインで画面位置を自動調整

JS

jQueryとwindows.jsファイルを読み込みます。
windows.jsを使用するように設定します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery.windows.js"></script>
<script type="text/javascript">
$(function() {
    $('.window').windows({
        snapping: true,
        snapSpeed: 500,
        snapInterval: 1000,
        onScroll: function(s){},
        onSnapComplete: function($el){},
        onWindowEnter: function($el){}
    });
});
</script>

snapping:自動スクロールするかを指定します。
snapSpeed:スクロールする速度を指定します。
snapInterval:自動スクロールするまでの時間を指定します。

CSS

CSSでセクションごとのbackgroundと位置を指定します。
backgroundは画像を指定してもOKです。

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.window {
    width: 100%;
    height: 100%;
    position: absolute;
}

#area1 {
    background: #d5d7dd;
    top: 0%;
}

#area2 {
    background: #1babb7;
    top: 100%;
}

#area3 {
    background: #6ab29f;
    top: 200%;
}
</style>

HTML

セクションに「class=”window”」を指定します。

<section id="area1" class="window"></section>
<section id="area2" class="window"></section>
<section id="area3" class="window"></section>

上記の設定をすると、中途半端な位置にスクロールがある場合、
画面位置を自動で調整してくれるようになります。

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です