1ページ内のスクロール遷移を簡単に実装するFSVSの使い方

ホーム > コラム > コラム【ホームページ制作】 > 1ページ内のスクロール遷移を簡単に実装するFSVSの使い方

Writer:Asai (20.09.16)

jQueryプラグイン「FSVS」を利用し、1ページ内のスクロール遷移を実装する方法を紹介します。このプラグインを利用することで、ストーリーの組み立てがしやすくなりますし、ユーザー側の操作性も向上します。ランディングページなどに活用することで、高い付加価値を与えてくれるのではないでしょうか？

FSVS公式サイト

目次【非表示】

実装例
必要なファイルを準備する
用意したファイルを読み込む
FSVSの設定

実装例

このように、マウスホイールや横のボタン等で次のコンテンツにスムーズに移動することができます。スマホのスワイプにも対応しているので、安心して利用できます。

必要なファイルを準備する

FSVSをダウンロード

下記のリンク先より、FSVSのファイルをダウンロードします。

GitHub

ダウンロードしたファイルのうち、利用するファイルは「fsv.jsとstyle.css」です。style.cssには、初期設定のスタイルが設定されているため、用途に合わせて改修を行います。また、HTMLの基本コードは実装例に記述したコードを参考にしてください。

用意したファイルを読み込む

用意したfsv.jsとstyle.cssを利用したいファイルにリンクさせます。jQueryも利用するため、併せてリンクを設定します。

<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="fsvs.js"></script>

FSVSの設定

FSVSの基本設定は下記のとおりです。

jQuery(document).ready(function($){
    var slider = $.fn.fsvs({
        autoPlay            : false,
        speed               : 1000,
        bodyID              : 'fsvs-body',
        selector            : '> .slide',
        mouseSwipeDisance   : 40,
        afterSlide          : function(){},
        beforeSlide         : function(){},
        endSlide            : function(){},
        mouseWheelEvents    : true,
        mouseWheelDelay     : false,
        mouseDragEvents     : true,
        touchEvents         : true,
        arrowKeyEvents      : true,
        pagination          : true,
        nthClasses          : 4,
        detectHash          : true
    });
});

上記の設定を記述することで、FSVSの設定は完了です。FSVSを活用することで、1ページのコンテンツでも起承転結がつけやすくなるなど、幅広いデザインが可能になると思います。是非参考にしてみてください。