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

最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。

デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの!

デモのアニメーション

FSVS - Full Screen Vertical Scroller -GitHub

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 );
});

sponsors

top of page

©2018 coliss