alvarotrigo/fullPage.js

これは何？

主な機能

• 01スクロール、スワイプ、キーボード操作に合わせてビューポートにスナップする全画面セクション。
• 02セクション内に配置できる横スライダー。
• 03セクションや個々のスライドへのアンカーリンクと、ブラウザー履歴のサポート。
• 04アクティブなセクションに連動するメニューとナビゲーションドット。
• 05画像、動画、音声の遅延読み込みに加え、埋め込みメディアの自動再生や、セクション離脱時の一時停止。
• 06指定した幅または高さを下回った場合に、通常のスクロールへ切り替えるレスポンシブ設定。

ユースケース

• 全画面セクションを備えた、1ページ構成のマーケティングサイトや製品紹介用ランディングページの構築。
• コンテンツがセクションごとに進むストーリーテリングページの作成。
• スクロールページ内にスライドショー形式のパネルを追加。
• Vue、React、Angular向けラッパーを使い、WordPressや各種フレームワークのプロジェクトに組み込む。

クイックスタート

1. 1

   npm で fullPage.js をインストールします

   npm install fullpage.js
2. 2

   HTML ページに CSS ファイルと JavaScript ファイルを読み込みます

3. 3

   ラッパー要素で fullPage.js を初期化します

使う前に知っておきたいこと

• !GPL-3.0 ライセンスのため、プロプライエタリな用途には別途商用ライセンスが必要です。
• !クローズドソースのプロジェクトで商用利用するには、ベンダーからライセンスを購入する必要があります。

トピック

よくある質問

fullPage.js とは？

セクションや横スライドを備えた、全画面スクロールWebサイトを構築するJavaScriptライブラリ。 fullPage.jsを使うと、各セクションがビューポートいっぱいに広がる、1ページ構成の全画面スクロールWebサイトを作成できます。マウスホイール、タッチ操作、キーボード、ナビゲーションドットで移動でき、セクション内に横スライダーを配置することも可能です。特定のセクションやスライドに移動するアンカーリンクや、アクティブなセクションに連動するメニューにも対応しています。

fullPage.js は無料で使えますか？ライセンスは？

fullPage.js は GPL-3.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

fullPage.js は今もメンテナンスされていますか？

半年以内に更新あり。fullPage.js の最終コミットは 2026年9月20日 です。

fullPage.js は何に使えますか？

全画面セクションを備えた、1ページ構成のマーケティングサイトや製品紹介用ランディングページの構築。 コンテンツがセクションごとに進むストーリーテリングページの作成。 スクロールページ内にスライドショー形式のパネルを追加。 Vue、React、Angular向けラッパーを使い、WordPressや各種フレームワークのプロジェクトに組み込む。

fullPage.js のインストール方法は？

npm で fullPage.js をインストールします: npm install fullpage.js HTML ページに CSS ファイルと JavaScript ファイルを読み込みます ラッパー要素で fullPage.js を初期化します

fullPage.js はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/alvarotrigo/fullPage.js