Writer:Asai (20.09.16)

jQueryプラグイン「FSVS」を利用し、1ページ内のスクロール遷移を実装する方法を紹介します。このプラグインを利用することで、ストーリーの組み立てがしやすくなりますし、ユーザー側の操作性も向上します。ランディングページなどに活用することで、高い付加価値を与えてくれるのではないでしょうか?
実装例
このように、マウスホイールや横のボタン等で次のコンテンツにスムーズに移動することができます。スマホのスワイプにも対応しているので、安心して利用できます。
必要なファイルを準備する
FSVSをダウンロード
下記のリンク先より、FSVSのファイルをダウンロードします。
ダウンロードしたファイルのうち、利用するファイルは「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ページのコンテンツでも起承転結がつけやすくなるなど、幅広いデザインが可能になると思います。是非参考にしてみてください。
コラム執筆中
アイビーネットでは、ホームページに関するコラムを随時執筆中です。