[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS

サイト構築 -JavaScript

Post on:2014年9月22日

FSVSのデモ

デモは4つのパネルで構成されており、各パネルはブラウザいっぱいに表示されています。

デモページ

パネルの操作は、スクロール、ホイール、右端のナビゲーションだけでなく、キーボード操作（矢印キー）、スマホ・タブレットのスワイプに対応しています。

デモページ：2ページ目

ホイール操作時には、ちょうどいい位置に自動で移動します。

FSVSの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="/assets/js/fsvs.js"></script>
</head>

スワイプ対応にするには、スクリプトを加えます。

  <script src="/assets/js/jquery.swipe-events.js"></script>

Step 2: HTML

各パネルをdiv要素などで実装し、.slideを加え、ラッパーで包みます。

<!doctype html>
<html class="fsvs" lang="en">
    <body>
        <div id="fsvs-body">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
    </body>
</html>

Step 3: JavaScript

スクリプトではアニメーションのスピード、ナビゲーションやキーボード操作などを設定できます。

$(document).ready( function() {
    var slider = $.fn.fsvs({
        speed : 5000,
        bodyID : 'fsvs-body',
        selector : '> .slide',
        mouseSwipeDisance : 40,
        afterSlide : function(){},
        beforeSlide : function(){},
        endSlide : function(){},
        mouseWheelEvents : true,
        mouseDragEvents : true,
        touchEvents : true,
        arrowKeyEvents : true,
        pagination : true,
        nthClasses : false,
        detectHash : true
    });
    //slider.slideUp();
    //slider.slideDown();
    //slider.slideToIndex( index );
});