fsvs.jsを使ってシンプルな縦スライドページを実装する方法｜DAD UNION

近年、Webサイトでのインタラクティブな表現が注目を集める中、「縦スライド」を取り入れたレイアウトは、ユーザーに強い印象を与える手法として人気です。
特に1ページ完結型のランディングページやポートフォリオサイトなどでは、縦方向への滑らかなスクロールでセクションを切り替えることで、情報の整理と視認性の向上が図れます。

本記事では、「fsvs.js」という軽量で使いやすいjQueryプラグインを用いて、シンプルな縦スライドページを構築する方法を、CSS・HTML・JavaScriptそれぞれのコード付きで詳しくご紹介します。
初めてfsvs.jsを触る方でも、この記事を読みながらコピペでスムーズに導入できますので、ぜひ一度お試しください。

Contents

シンプルな縦スライドページを実装するCSSの記述
fsvs.jsを使ってシンプルな縦スライドページを実装するJavaScriptの記述
シンプルな縦スライドページを実装するHTMLの記述
fsvs.jsを使ったシンプルな縦スライドデモページ
ソース元：Full Screen Vertical Scroller
まとめ

シンプルな縦スライドページを実装するCSSの記述

※style.cssファイルを読み込みます。4つのスライドエリアの背景色を.b1～.b4で指定してます。必要に応じて変更して下さい。

<link href="style.css" media="all" rel="stylesheet" type="text/css">
<style type="text/css">
body{
  text-align: center;
  font-size: 30px;
  color: #ffffff;
  line-height: 3em;
}
h1{
  text-align: center;
  font-size: 32px;
  padding-top: 30px;
  line-height: 1.4em;
  color: #ffffff;
}
.bg1{
  background-color: #333333;
}
.bg2{
  background-color: #7396FF;
}
.bg3{
  background-color: #FFA64D;
}
.bg4{
  background-color: #B200B2;
}
</style>

fsvs.jsを使ってシンプルな縦スライドページを実装するJavaScriptの記述

※jquery-1.11.0.min.js、jquery-migrate-1.2.1.min.js、fsvs.jsファイルを読み込みます。htmlタグにclass=”fsvs”を指定し、縦スライドエリアにclass=”slide”を指定します。$.fn.fsvs({オプション])でオプションでは自動スライド、スライドスピード、縦スライドエリアのclass等を設定します。必要に応じて変更して下さい。

        <script src="jquery-1.11.0.min.js"></script>
        <script src="jquery-migrate-1.2.1.min.js"></script>
        <script src="fsvs.js"></script>
        <script>
        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          : 2,
                detectHash          : true
            });
        });
        </script>

シンプルな縦スライドページを実装するHTMLの記述

※htmlタグにclass=”fsvs”を指定します。

<html class="fsvs" lang="ja">

　
※縦スライドエリアにclass=”slide”を指定します。必要に応じて変更して下さい。

        <div id="fsvs-body">
            <div class="slide bg1">
              <h1 class="text-center pt-5">fsvs.jsを使ったシンプルな縦スライドページです。<br>下にスクロールしてみてください。</h1>
            </div>
            <div class="slide bg2">スライドエリア２</div>
            <div class="slide bg3">スライドエリア３</div>
            <div class="slide bg4">スライドエリア４</div>
        </div>