LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@alvarotrigo(Álvaro Trigo)

数分でスクロールスナップのウェブサイトを作成 - fullPage.js（超簡単！）

Last updated at Posted at 2024-10-10

fullPage

もし、モダンで美しいウェブサイトを超速で作りたいなら、fullPage.jsをチェックしてみてください。

fullPage.jsはJavaScriptライブラリで、React、Vue、Angular用のバージョンもあり、わずか数分で全画面のスクロールスナップサイトを作成できます。

こちらが例です。でも、それだけじゃありません。すべての機能を知りたいなら、もっと多くの例もチェックしてみてください。

では、fullPage.jsの使い方を簡単に説明しましょう。

何を創るのでしょうか？

このチュートリアルでは、4つのセクションがあるページを作成します。

3つは全画面で表示され、最後のセクションはフッターで、画面全体の高さを占めないようにします。

やることは以下の通りです：

  • 右側にバレットナビゲーションを追加
  • 各セクションに異なるURLハッシュを追加（#home、#about-usなど）
  • ページのヘッダーに固定ボタンを追加し、クリックするとコンタクトページまでスクロールできるようにする
  • 小画面デバイスではスナップスクロール効果と全画面表示を無効化
  • 大量のコンテンツがあるスクロール可能なセクションを作成

ページの基本構造を作成

まずは、必要なHTML構造を作成します。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div id="fullpage">
       <div class="section">Section 1</div>
       <div class="section">Section 2</div>
       <div class="section">Section 3</div>
       <div class="section">Section 4</div>
   </div>
</body>
</html>

基本的に、IDが「fullpage」の“div”を追加し、これを後ほどfullPage.jsの初期化で使用します。

内部には4つの空のセクションを追加しました。

各セクションは「section」クラスを使用しています。これは、fullPage.jsがセクションとして定義するために使用するデフォルトのセレクターです。

注意: 'DOCTYPE'を追加しないと、問題が発生することがあるので忘れずに追加してください。

必要なファイルを含める

必要なファイルを2つ追加します：

  • Fullpage CSSファイル (fullpage.min.css)
  • Fullpage JSファイル (fullpage.min.js)

今回は、https://www.jsdelivr.com/package/npm/fullpage.jsのようなCDNからこれらを読み込みます。

ページの'

'タグ内にCSSファイルを、閉じる''タグの直前にJSファイルを含めます： 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link href="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.css" rel="stylesheet">
</head>
<body>
   <div id="fullpage">
       <div class="section"></div>
       <div class="section"></div>
       <div class="section"></div>
       <div class="section"></div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.js"></script>
</body>
</html>

初期化

必要なものがすべて揃ったので、fullPage.jsを初期化して魔法を起こしましょう。

そのためには、インポートしたfullpage.min.jsファイルの後に<script>タグを追加する必要があります。

<script src="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.js"></script>
<script> new fullpage('#fullpage', {
       //options here
       sectionsColor: ['red', 'orange', 'blue', 'yellow']
   });
</script>

最もシンプルな初期化方法を使用しましたが、プラグインには多くのオプションがあり、公式ドキュメントで確認できます。

今回はテストのために、セクションに背景色を追加しました。

これで、全画面のスクロールスナップページが完成しました！

結果はこちら：
https://codepen.io/alvarotrigo/pen/rNXWBGj

そして、こちらがHTML全体のコードです：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link href="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.css" rel="stylesheet">
</head>
<body>
   <div id="fullpage">
       <div class="section"></div>
       <div class="section"></div>
       <div class="section"></div>
       <div class="section"></div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/fullpage.js@4.0.29/dist/fullpage.min.js"></script>
   <script> new fullpage('#fullpage', {
           //options here
           sectionsColor: ['red', 'orange', 'blue', 'yellow']
       }); </script>
</body>
</html>

すごいですね！ たった2分で、基本的なスクロールスナップサイトが作れました！

では、他の詳細について見ていきましょう。

準備完了

テキストが水平に中央揃えされていないことや、少し小さいことに気づいたかもしれませんが、これはCSSで解決できます。

.section{
    font-size: 6em;
    text-align: center;
    font-weight: bold;
}

全画面でないセクションの定義

前のセクションでフッターを追加したかったことを覚えていますか?

これは非常に簡単です。「fp-auto-height」というクラス属性を追加して、fullPage.jsにそのセクションが全画面にならないことを伝えるだけです。

今回は、最後のセクションにこの属性を追加します：

<div id="fullpage">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  <div class="section fp-auto-height">Section 4</div>
</div>

これで全画面でないフッターが完成しました！ チェックしてみてください：

https://codepen.io/alvarotrigo/pen/GRVNKQz

ナビゲーションバレットの追加

ナビゲーションを簡単にするために、ナビゲーションバレットやメニューを追加するのは良いアイデアです。

今回は、fullPage.jsが提供するナビゲーションバレットを使用します。

初期化時に「navigation」オプションを使用するだけです：

new fullpage('#fullpage', {
   sectionsColor: ['red', 'orange', 'blue', 'yellow'],
   navigation: true
});

これで完了です！

次に、ナビゲーションを白くするために、デフォルトのスタイルを上書きします：

/* ナビゲーションドットのスタイルを上書き */
#fp-nav ul li a span{
    background: white;
}

素晴らしいですね！ 結果を確認してみましょう：

https://codepen.io/alvarotrigo/pen/QWeGLxb

スクロール可能なセクションの作成

「長いテキストを持つセクションがある場合、スクロールスナップサイトはどうなるの？」と思うかもしれません。

心配無用です。fullPage.jsはこうした問題にも対応しているので、何も心配する必要はありません。

次に、2番目のセクションに非常に長いテキストを追加してみましょう：

<div id="fullpage">
  <div class="section">Section 1</div>
  <div class="section">
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
    <p>This is a very long text</p>
  </div>
  <div class="section">Section 3</div>
  <div class="section fp-auto-height">Section 4</div>
</div>

セクションに大きなフォントを使用しているため、このテキストはビューポートの高さを超えるはずです。

さて、どうなるか見てみましょう：

https://codepen.io/alvarotrigo/pen/LYwbPJm

驚きですね！何もしなくても、ページは期待通りに動作します。

2番目のセクションに到達すると、内容がスクロール可能になり、テキストの最後までスクロールした後に次のセクションに進みます。

URLハッシュの追加

各セクションに異なるURLを持たせるために「ハッシュ」（#）を使用すると、ページのナビゲーション時にコンテキストを提供するだけでなく、特定のセクションをリンクで共有することも可能です。

URLハッシュ（アンカー）を追加するのは、初期化時にそのアンカーを含む配列を追加するだけで非常に簡単です。

new fullpage('#fullpage', {
   anchors: ['home', 'about-us', 'page3', 'footer'],
   sectionsColor: ['red', 'orange', 'blue', 'yellow'],
   navigation: true,
   continuousVertical: true
});

または、各セクションに「data-anchor」属性を使用してもOKです。

ページにアクセスすると、上下にナビゲートするたびにURLが変わるのがわかるでしょう。すごいですね！

注意：data-anchorタグの値は、サイト上の任意のIDや（IEではNAME）要素と同じにしてはいけません。

セクションへのリンクの作成

次に、クリックするとフッターセクションまでスクロールする固定ボタンをページに追加しましょう。

fullPage.jsの要素の前にボタン要素を追加します：

<div class="button">Footer</div>  
<div id="fullpage">  
  ....

しかし、

ではなく、最後のアンカー（「footer」の値を使用）にリンクする要素を追加しましょう。 
<a href="#footer" class="button">Footer</a>  
<div id="fullpage">  
  ....

これで、最後のセクションへのリンクが作成されました。あとは固定ボタンのスタイルを追加するだけです。

CSSに追加しましょう：

.button{
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 999;
  background: white;
  border-radius: 10px;
  padding: 10px;
}

これで、最後のセクションまでスクロールするリンクが完成しました。美しいですね！

デモはこちら：

https://codepen.io/alvarotrigo/pen/OJKbLBK

レスポンシブモードを有効にする

最後に、レスポンシブ対応を行います。

小画面デバイスではスクロールスナップ効果を無効にしてみましょう。コンテンツがビューポートに収まらない場合、複数のスクロール可能なセクションがあるのは避けたいでしょう。

'responsiveWidth'オプションを使用します。今回は、幅が900px未満のデバイスでfullPageのスナップ効果を無効にします。

初期化時に「responsiveWidth: 900」を追加します：

new fullpage('#fullpage', {
   anchors: ['home', 'about-us', 'page3', 'footer'],
   sectionsColor: ['red', 'orange', 'blue', 'yellow'],
   navigation: true,
   responsiveWidth: 900
});

そして、これで完了です！これで、ページはスナップ効果を無効にし、必要に応じて各セクションを大きくして内部スクロールを回避します。

以下のリンクで、ビューポートの幅を900px未満にリサイズしてテストすることができます：

https://codepen.io/alvarotrigo/pen/bGXBNVa

結論

数分で、このような美しいスナップ効果を持つページを作成できました。ナビゲーションのドット、URLのハッシュ、レスポンシブ対応、内部リンクなど、ページをよりナビゲートしやすくする細かいディテールも追加されています。

そして、これは始まりに過ぎません！fullPage.jsを使えば、サイトをさらにカスタマイズすることができます。

  • セクションの出入り時にCSSアニメーションを追加できます（例）。
  • スクロールに応じてビデオアニメーションをトリガーできます（例）。
  • 視聴者に強い印象を与えるビデオ背景を追加できます（例）。
  • パララックス効果を追加できます（例）。

その他、さまざまな機能があります！

fullPage.jsの例のリストを確認して、さらにアイデアを得てください：fullPage.jsの例一覧。

質問があれば、Github Issuesフォーラムで尋ねるか、お問い合わせフォームを通じて直接連絡してください。その前に、fullPage.jsのドキュメントで検索することをお勧めします。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?