日別アーカイブ: 2014年1月30日

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

Posted on by
返信

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を使用するように設定します。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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です。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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”」を指定します。

?
1
2
3
<section id="area1" class="window"></section>
<section id="area2" class="window"></section>
<section id="area3" class="window"></section>

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