arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[jQuery]fullPage.jsでパララックスサイトを作ろう

2015年あたりから見た人を引き込みやすいパララックスサイトはトレンドとなり、現在でも新しい見せ方のパララックスサイトが次々と登場しています。
今回はGoogleなども使用している簡単に全画面スクロールのパララックスサイトが作れるFullPage.jsプラグインを私のおさらいも兼ねて紹介します。

パララックスってなに?

視差効果のことです。
サイトの場合、ページをスクロールする際に画面の手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するものを指します。

FullPage.jsって?

「jquery パララックス」と検索したくらいでは上位に表示されないのですが、有名なのはGoogleをはじめとした大手企業がこのプラグインを採用しているおかげでしょう。
全画面表示でスクロールすると次の全画面表示がするっと現れます。
実際にデモサイトを見てみましょう。
fullPage.js
全画面のカルーセルも可能です。とてもシンプルですが、インスピレーションが湧くような動きですね。

そして、Appleが実際に作りそうなデモもこのfullPage.jsでプラグインの製作者が作っています(iPhone5のプロダクトページには採用されていたようです)。クールですね。
Apple fullPage.js Demo
この他に動画も全画面で表示させることができます。

FullPage.jsの使い方

早速使ってみましょう。段取りは以下です。

  1. サイトからファイルをダウンロード
  2. HTMLマークアップ
  3. スクリプトを追加
  4. CSSで整形

fullPage.jsの入手

以下のページからファイルをダウンロードします。
fullPage.js-サイトページ
fullPage.js-GitHubダウンロードページ
GitHubのダウンロードは右側にあるをクリックして、右側のからダウンロードできます。

解凍したフォルダの中で、基本形に必要なファイルはjquery.fullPage.cssjquery.fullPage.jsあるいはjquery.fullPage.min.jsの2つです。

※たまに他の解説サイトでjquery-ui.min.jsを読み込ませている記事を見かけますが、jQueryUI無しでも動きますので、扱い方がわからない場合は読み込ませなくてもOKです。
次はマークアップです。

HTML-ファイル設置+画面マークアップ

ファイルを埋め込みます。
もちろん、CDNでも可能です。CDNはそれぞれ

  • CSSファイル:https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css
  • jsファイル:https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js

を読み込みます。jQuery本体も忘れずに読み込ませます。

画面をマークアップしていきます。まずはナビゲーションです。

data-menuanchor=""class="active"は隣のページに遷移していくのと同時に、該当ページのナビゲーション内にあるボタン表示が変わっていく「アンカー」という機能が使えるように書いています。

次にページをマークアップします。

カルーセルは上の<div class=”section”></div>の中に入れて使います。

全体的な文書構造はこちら。2番目のページにカルーセルを入れてみました。

次はスクリプトを書きます。

jQuery

fullpage.min.jsの下に書くか、fullpage-myscript.jsみたいなファイルを別に作って読み込ませます。
基本形は以下だけです。

これを下にいろいろオプションを付け足していきます。

まずは先ほどナビゲーションで書いておいたアンカーを使えるようにします。

ついでに背景色も変えてしまいましょう。

これで十分動きます。
次はナビゲーション部分をCSSで整えていきます。

CSS

…と言っても、デモサイトとほぼ同じデザインですが…ここからカスタムするのもいいですね。


一応これでおおむね完成です。
コピペだけなら簡単!です…しかし記事を書くのは時間がかかりますね(^^;)

表示して確認してみよう

文書構造の確認

ここまでの文書構造が以下です。

CSSはインラインよりもfullpage-style.cssみたいなファイルを作って読み込ませたほうがいいですね。

表示してみよう!

うまく動くか確認してみましょう。

See the Pen fullPage.js by necomacustom (@tamayura) on CodePen.27739


上々ですね。

その他オプション

fullPage.jsは多機能なパララックスプラグインですが、多機能すぎるので、よく使われていそうかな?というものをまとめてみました。

※上記のうち、easingだけは「fullPage.jsの入手」の章で書いたjQueryUIやfullPage.jsフォルダ内の「vendors」フォルダに格納されているjquery.easings.min.jsを読み込む必要があります。

おまけ

この記事を書く際に資料としていろいろな記事を読んでいたのですけれども、個人的に琴線に触れたものをご紹介します。

multiScroll.js

製作者さんが更にかっこいいプラグインを作っているようです。

multiScroll.js
左側は下から、右側は上からスクロールしてきて全画面表示になるという、最近見かけるようになった左右分割ページのスクロール版がこのプラグインで作れます。

もっと機能をすっきりとさせたい

fullPage.jsは軽量かつ多機能で素晴らしいのですが、それでも他のプラグインを使ったり、重いファイルを使う事態がないとは言い切れません…
JavaScript/jQueryの勉強でよく記事を読んでいるBlack Flagさんが実験と称して1ページごとにスクロールで遷移するUIを実装する記事を書いていらっしゃいます。

このようにゴリゴリとコードが書けるようになりたいです。


意外と軽量なのでササッとパララックスページを作成したい時に便利ですね。
ランディングページや、そう多くないアイテムを相手に印象付けたい場合に使えそうです。
実装が簡単な反面、しっかりとしたサイトを作るとなると、見せ方に工夫が必要と感じました。
また、『パララックス サイト』のような検索するといっぱいパララックスサイトが出てきますので、研究材料に事欠かず嬉しい限りですね。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP