JavaScript

fullPage.jsを使った全画面スクロール・スライダー演出

 

ウェブデザインやフロントエンド開発を行う際、ページ全体を滑らかにスクロールさせたり、視覚的なインパクトを持たせたい場合に役立つライブラリが「fullPage.js」です。
このツールを使えば、シンプルでありながら視覚的に魅力的なウェブページを手軽に作成することができます。
この記事では、fullPage.jsの基本から、実際に使ってみる方法、さらには実践的なサンプルページの作り方まで、ステップバイステップで丁寧に解説します。

Contents

fullPage.jsとは？

まず、fullPage.jsがどのようなツールなのかを説明しましょう。fullPage.jsは、ウェブページのセクションごとにスクロールできるフルスクリーンのウェブサイトを簡単に作成できるJavaScriptライブラリです。このライブラリを使うと、各セクションが画面全体を占め、ページの上下や左右にスムーズに移動することができます。また、各セクションやスライドに異なる背景やエフェクトを設定できるため、視覚的に非常にインパクトのあるサイトを構築することができます。

fullPage.jsの特徴

fullPage.jsには、ウェブページに独自性と動的なエレメントを加えるためのさまざまな特徴があります。以下にその主な特徴をまとめました。

  1. フルスクリーンでのスクロール:
    ユーザーがスクロールするごとに、ページが次のセクションに移動し、全画面表示のエフェクトが得られます。これにより、ユーザーにとってスムーズで直感的なナビゲーションが可能になります。
  2. 複数のスクロール方向に対応:
    fullPage.jsは、上下だけでなく左右にもスライドできるオプションを提供しています。これにより、より複雑なレイアウトやデザインが可能になります。
  3. レスポンシブ対応:
    fullPage.jsはレスポンシブデザインにも対応しており、異なるデバイスや画面サイズでも同じように機能します。モバイルデバイスでも快適な操作が可能です。
  4. 豊富なカスタマイズオプション:
    fullPage.jsは、デザインや動作を細かくカスタマイズするための多くのオプションを提供しています。色、フォント、アニメーション効果など、あらゆる要素をコントロールすることができます。
  5. 軽量で高速:
    fullPage.jsは非常に軽量で、ページの読み込み速度をほとんど低下させません。これにより、ユーザーエクスペリエンスを損なうことなく、ページに動的な要素を追加することができます。
  6. 高い互換性:
    fullPage.jsは、ほとんどのモダンブラウザで動作し、クロスブラウザ互換性が高いです。これにより、さまざまなデバイスやブラウザで一貫した表示と機能を提供します。

fullPage.js実践サンプルページを作成

実際にfullPage.jsを使用してサンプルページを作成してみましょう。以下では、HTML、CSS、およびJavaScriptを使って、簡単なフルスクリーンスクロールページを作成する手順を説明します。

CSSコード

CSSコードを確認しましょう。まず、fullpage.css、reset.cssファイルを読み込みます。
以下のCSSコードは、各セクションのスタイルやナビゲーションメニューのデザインを定義しています。各セクションには異なる背景が設定されており、スクロールするごとに背景が変わるエフェクトが楽しめます。

<link rel="stylesheet" type="text/css" href="fullpage.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
/* Custom CSS
 * --------------------------------------- */
body{
    color: #333;
    color: rgba(0,0,0,0.5);
}

h1{
    font-size: 6em;
}
p{
    font-size: 2em;
}
.intro p{
    width: 50%;
    margin: 0 auto;
    font-size: 1.5em;
}
.section{
    text-align:center;
}
#menu li {
    display:inline-block;
    margin: 10px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);
    -webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
    background:#666;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}
#menu li a{
    text-decoration:none;
    color: #000;
}
#menu li.active a:hover{
    color: #000;
}
#menu li:hover{
    background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
    padding: 9px 18px;
    display:block;
}
#menu li.active a{
    color: #fff;
}
#menu{
    position:fixed;
    top:0;
    left:0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin:0;
}


/* Style for our header texts
* --------------------------------------- */
h1{
    font-size: 4em;
    color: #fff;
    margin:0;
}
.section p,
.intro p{
    color: #fff;
}

/* Centered texts in each section
* --------------------------------------- */
.section{
    text-align:center;
}

/* Sections backgrounds
* --------------------------------------- */
#section0{
    background-image: linear-gradient(128deg,#9999FF,#8888FF);
}

#section1{
    background-image: linear-gradient(128deg,#C9EAEF,#8ed2dd);
}

#section2{
    background-image: linear-gradient(128deg,#fc40ff,#FF0000);
}
</style>

　
このCSSコードにより、ページが視覚的に美しく、ナビゲーションが簡単になるように設計されています。また、各セクションの背景色やテキストの色が変更されており、デザインの統一感が保たれています。

HTMLコード

HTMLコードを見ていきましょう。以下のコードは、シンプルなページ構造を持ち、3つのセクションが含まれています。各セクションには、それぞれ異なる背景色が設定されており、スクロールによってセクション間を移動できるようになっています。

<ul id="menu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">エリア1</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">エリア2</a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">エリア3</a></li>
</ul>

<div id="fullpage">
    <div class="section " id="section0">
        <h1>fullpage.jsを使ったスライドエリア1</h1>

    </div>
    <div class="section active" id="section1">
        <div class="slide" id="slide1">
            <div class="intro">
                <h1>スライドエリア2:左エリア</h1>
            </div>
        </div>
        <div class="slide active" id="slide2">
            <div class="intro">
                <h1>fullpage.jsを使った<br>全画面スクロール・スライダー<br>演出デモページ</h1>
                <p>マウスと使って上下左右にスライドさせてみて下さい</p>
            </div>
        </div>
        <div class="slide" id="slide3">
            <h1>スライドエリア2:右エリア</h1>
        </div>

    </div>
    <div class="section" id="section2">
        <div class="intro">
            <h1>fullpage.jsを使ったスライドエリア3</h1>
<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/demo/inc/foot.php'; ?>
        </div>
    </div>
</div>

JavaScriptコード

最後に、JavaScriptコードを見てみましょう。このコードは、fullPage.jsを使用してページのセクション間をスムーズに移動するための設定を行っています。

<script type="text/javascript" src="fullpage.js"></script>
<script type="text/javascript">
    var myFullpage = new fullpage('#fullpage', {
        anchors: ['firstPage', 'secondPage', '3rdPage'],
        menu: '#menu',
        slidesNavigation: true,
        lazyLoad: true,
        credits: {enabled: false}
    });
</script>

　
このJavaScriptコードでは、fullpage関数が使用され、セクション間のスムーズなスクロールが実現されています。また、ナビゲーションメニューと連動するためにanchorsオプションが設定されています。これにより、ユーザーがナビゲーションメニューをクリックすることで、特定のセクションにジャンプできるようになります。

fullPage.jsを使った全画面スクロール・スライダー演出デモページ

ここまでの内容を実際に試してみたい方のために、fullPage.jsを使った全画面スクロール・スライダー演出のデモページを用意しました。以下のリンクからアクセスして、マウスやタッチデバイスを使って、上下左右にスライドさせてみてください。

fullPage.jsを使った全画面スクロール・スライダー演出デモページ

公式サイト

fullPage.jsについてさらに詳しい情報や高度なアニメーションの実装方法については、公式サイトを参照してください。公式サイトでは、さまざまなチュートリアルやサンプルコードが提供されており、より高度なカスタマイズや機能追加が可能です。

fullPage.js | One Page Scroll sections Site Plugin

まとめ

fullPage.jsは、ウェブサイトに視覚的なインパクトと使いやすさを加えるための非常に強力なツールです。特に、フルスクリーンのセクションを持つページを簡単に作成できる点が大きな特徴です。初心者の方でも、この記事で紹介した手順を参考にすれば、短時間で素晴らしい結果を得ることができるでしょう。ぜひ、このライブラリを使って、自分だけの魅力的なウェブページを作成してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

slider fullPage.js
関連記事