目次
jQueryで各コンテンツをフルスクリーンで表示させる方法をご紹介します
「jquery」でスクロールするとコンテンツ事にスクロールされるスクリプトの紹介です!!
スマホの時に縦幅の影響で表示おかしくなるので、その部分をスクリプの設定で解除します。
「jquery.js」をダウンロード致します。
ダウンロード先
「fullPage.js」をfullPage.js
ダウンロード先
HTMLを記載
下記のソースを追加してください。
|
1 2 3 4 5 6 |
<div id="fullpage"> <div class="section fp-auto-height-responsive" data-anchor="slide1">content01</div> <div class="section fp-auto-height-responsive" data-anchor="slide2">content02</div> <div class="section fp-auto-height-responsive" data-anchor="slide3">content03</div> <div class="section fp-auto-height-responsive" data-anchor="slide4">content04</div> </div> |
Cssを記載
Cssは、ダウンロードした、「fullpage.css」を読み込みます。
Javascriptを記載
下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(function(){ $('#fullpage').fullpage(); $(window).on('load resize', function () { responsive(); }); function responsive() { var w = $(window).width(); if ( w <= 768 ) { $.fn.fullpage.setResponsive(true); } else { $.fn.fullpage.setResponsive(false); } } }); </script> |
サンプル
下記のソースをお使いください。
表示サンプルを掲載いたします。
サンプルはこちら：jQueryコンテンツフルウィンドウサンプル
