[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js

スクリプトの名前が「windows.js」でMicrosoftの？ と思うかもしれませんが、MicrosoftのWidndowsとは関係なく、ブラウザのウインドウのことです。

最近よく見かける1ページで構成されたサイトで、垂直に配置したコンテンツごとに背景色を変え、垂直にスクロールした時に、中途半端なスクロール位置でも指定した位置にスナップ（自動補正）させるjQueryのプラグインを紹介します。

windows.js -GitHub

• windows.jsのデモ
• windows.jsの使い方

windows.jsのデモ

デモページはコンテンツごとに異なるカラーの背景で、スクロールすると次のコンテンツが表示されます。

デモページ

まずは、ゆっくりとスクロール。
次のコンテンツが見えてきました。

中途半場な位置でストップ

スクロールをストップし1秒くらい放置すると、ちょうどいい位置にスナップします。

次のコンテンツをいい位置で表示

スクロールしすぎた場合にも対応しています。

通り過ぎてしまった場合

スクロールしすぎた場合も、無問題！

スクロールしすぎも補正

windows.jsの使い方

実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。

Step 1: HTML

HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。
classは変更可です。

<section class="window"></section>
<section class="window"></section>
<section class="window"></section>
<section class="window"></section>
<section class="window"></section>

Step 2: 外部ファイル

「jquery.js」と当スクリプトをhead内に記述します。

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.windows.js"></script>

Step 3: JavaScript

jQueryのセレクタで各コンテンツに付加したclassを指定し、スクリプトを実行します。
オプションでは、スナップするスピードやインターバルの時間を設定できます。

$(document).ready(function(){

    $('.window').windows({
        snapping: true,
        snapSpeed: 500,
        snapInterval: 1100,
        onScroll: function(scrollPos){
            // scrollPos:Number
        },
        onSnapComplete: function($el){
            // after window ($el) snaps into place
        },
        onWindowEnter: function($el){
            // when new window ($el) enters viewport
        }
    })

});

SCSS

参考に、パネルの配置や各背景のカラーを変更するスタイルシートです。

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

@for $i from 1 through 6{
    .window:nth-child(#{$i}){
        background:nth($colors, $i);
        top:($i - 1) * 100%;
    }
}