fsvs.jsを使ってシンプルな縦スライドページを実装する方法をご紹介します。
Contents
ディスプレイ広告
シンプルな縦スライドページを実装する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"> </div> <br> <br> ※縦スライドエリアにclass="slide"を指定します。必要に応じて変更して下さい。 <pre class="brush:html;"> <div id="fsvs-body"> <div class="slide bg1"> <h1 class="text-center pt-5">fsvs.jsを使ったシンプルな縦スライドページです。<br>下にスクロールしてみてください。</h1> </div> <div class="slide bg2">スライドエリア2</div> <div class="slide bg3">スライドエリア3</div> <div class="slide bg4">スライドエリア4</div> </div>
fsvs.jsを使ったシンプルな縦スライドデモページ
ソース元:Full Screen Vertical Scroller
以下がソース元です。
Full Screen Vertical Scroller
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。