技術

fullpage.jsでコンテンツを画面幅いっぱいでスクロールさせる。

投稿日:

fullpage.jsとは

fullpage.jsは一つのコンテンツを画面いっぱいに表示して、それをコンテンツ毎にスクロール出来るようにしてくれるjsです。

配布サイトはこちら
https://alvarotrigo.com/fullPage/

実際に使って見る

まずはダウンロードしてきたファイルをように読み込みましょう。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.fullPage.js"></script>
<link rel="stylesheet" href="jquery.fullPage">

読み込めたら、画面いっぱいに表示するコンテンツを用意していきます。


<div id="fullPage">
<section class="section">page01</section>
<section class="section">page02</section>
<section class="section">page03</section>
<section class="section">page04</section>
<section class="section">page05</section>
</div>

コンテンツが準備出来たらスクリプトを書いていきましょう。


<script>
$('#fullPage').fullpage();
</script>

これで画面いっぱいのコンテンツが出来たと思います。

また下記の用に「.slide」クラスにすると左右にスライドするコンテンツも作れます。


<div id="fullPage">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>

また、初期値のスライド用のクラスは、上下が「.section」、左右が「.slide」なのですが、
下記の用に記述することによって、これを変更することも出来ます。


<script>
$('#fullPage').fullpage({
sectionSelector: '.section', //上下のコンテンツ
slideSelector: '.slide' //左右のスライドコンテンツ
});
</script>

その他オプションや、コールバックも用意されているので興味のある方はドキュメントも読んでみてください。
https://github.com/alvarotrigo/fullPage.js#fullpagejs

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

wordpressで固定ページが表示されない時は.htaccessを確認しよう

こんばんは 個人でwordpressサイトを持っているのですが いきなり固定ペー …

Angularでビューのパラメーターを詳細まで見たいときのコード

こんにちはコーテッグのこやまです angularでviewのパラメーターがうまく …

[Rails]「どのブラウザからのアクセスか」を判別する方法

こんにちは。たなかです。 前回以下のような記事を書きました。   [R …

no image

【Angular】Full calendarで横スクロールを実装

こんにちは Full Calendarにはいくつかの表示モードがあります。 こち …

セレクトボックスにfont-awesomeのアイコンを使うときは注意が必要。

セレクトボックスの中にfont-awesomeのアイコンを表示したい。 そんなと …