案件で全画面ページを簡単に作るプラグイン「fullpage.js」を使用する事がありました。
今回、レスポンシブ対応にあたって、文章等が1ページの範囲を超える場合があり、その際はスクロールバーを表示してスクロールできるようにしたいため、scrolloverflow.jsも使用しました。
そちらの簡単な使い方とハマった所をtipsとして取り上げます。
初期設定
まずは、必要な読み込みファイルから。
まず、表示させたいページに必要なCSSとjsを読み込みます。
- <!-- css -->
- <link rel="stylesheet" href="css/jquery.fullpage.css">
- <!-- js -->
- <script src="js/jquery-1.12.0.min.js"></script>
- <script src="js/scrolloverflow.js"></script>
- <script src="js/jquery.fullpage.js"></script>
全画面ページにしたい所は起点の要素（今回はIDがfullpageの要素）と、その子クラスにsectionの名前を付けます。
横スライドも欲しい場合は、section要素にその子のクラスにslideという名前を付けます。
- <div id="fullpage">
- <div class="section">Some section</div>
- <div class="section">Some section</div>
- <div class="section">Some section</div>
- <div class="slide"> Slide 1 </div>
- <div class="slide"> Slide 2 </div>
- <div class="slide"> Slide 3 </div>
- <div class="slide"> Slide 4 </div>
- <div class="section">Some section</div>
- </div>
jQueryを使って呼び出します。
- $('#fullpage').fullpage({
- anchors: ['page1', 'page2', 'page3', 'page4'], // ページのアンカー名を指定
- menu: '#global-menu', // グローバルメニューのID名
- scrollOverflow: true, //全画面よりコンテンツが多い場合スクロールバーを出すかどうか
- loopHorizontal:false, //横スライダーをループさせない
- touchSensitivity: 16, //タッチデバイスでのセクション切替の強さの閾値
- afterLoad: function (anchorLink, index) {
- //セクションが読み込み終わりのイベント
- if (index === 1) {
- //TOPロード時
- }else if(index === $('#fullpage .section').length){
- //最下ページ時
- }else{
- //その他のページの時
- }
- },
- afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
- // スライドが読み込み終わった後のイベント
- },
- onLeave: function (index, nextIndex, direction) {
- // セクションを離れた時のイベント
- },
- onSlideLeave: function (anchorLink, index, slideIndex, direction, nextSlideIndex) {
- // スライドを離れた時のイベント
- },
- afterResize: function () {
- // リサイズ後のイベント
- }
- });
グローバルメニューが要る場合には、上記menu:"#global-menu"のように指定して、li要素のdata-menuanchorに上記anchors配列で指定した名前と対応させます。
そうすると、グルーバルメニューのクラスに現在居るページはactiveが付きます。ページが遷移される度に現在居るクラスにactiveが付き、移動元ページのactiveクラスは外れますので、メニューのON/OFFのCSSの装飾などが簡単に作れます。
- <ul id="global-menu">
- <li data-menuanchor="page1" class="active nav__item"><a href="#top">page1</a></li>
- <li data-menuanchor="page2" class="nav__item"><a href="#service">page2</a></li>
- <li data-menuanchor="page3" class="nav__item"><a href="#demo">page3</a></li>
- <li data-menuanchor="page4" class="nav__item"><a href="#company">page4</a>
- </li></ul>
これで、縦4ページ、3ページ目に横に4スライドある全画面ページが出来上がったと思います。
TIPS
作成に当たって色々とありましたので、そこで得たTipsをドドーンと紹介しちゃいます。
可変サイズ対応
全画面のページのサイズが確定した後にAJAXやdisplay:noneしていた要素を表示させて、表示させている要素が増えた場合、スクロールする領域が足りない事が起きたりします。その際は、rebuild()関数を呼び出して、再度サイズ計算し新たなページのサイズを確定させます。
- // フェードイン・フェードアウトの後fullpage.js再計算
- $("#recruit-space").fadeToggle(500,function(){
- $.fn.fullpage.reBuild();
- })
fullpage.jsの読み込み後に何かをさせたい場合
jQueryのロード時とfullpage.jsのロード時はタイミングとして別になるので、 fullpage.jsが読み込まれた後に処理を走らせたい場合は、afterRender以下に処理を書きます。
- afterRender: function () {
- //（例）クリッカブルマップレスポンシブ
- $('img[usemap]').rwdImageMaps();
- }
ページを遷移させる度にGoogle Analyticsのコードを送る
fullpage.jsは1ページを複数ページとして見せているだけなので、普通にGoogle Analyticsコードを貼っても該当ページの読み込み時に1回しか送られません。
貼るコードを分けて、縦ページの遷移、横ページをスライドさせた時に、Analyticsのコードを送るように書けば思うようなデータが取れます。
通常のアナリティクスコード読み込みの時に、下の方にあるga('send', 'pageview');を外します。
- <script>
- (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
- ga('create', 'UA-XXXXXXXX-XX', 'auto');
- </script>
そして、fullpage.jsの横スライドが読み込まれた際に起きるイベントafterSlideLoad内にga('send'...のコードを書きます。
- afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
- ga('send', 'pageview', { 'page': anchorLink, 'title': slideAnchor });
- },
縦ページ遷移に対応するにはadterLoadイベント内に記述します。
- afterLoad: function (anchorLink, index) {
- ga('send', 'pageview', { 'page': anchorLink, 'title':anchorLink });
- }
まとめ
SPA風にページが手軽に作れたり、アイデア次第で面白いページが作れると思います。その分独自のライフサイクルやイベントがあるのでハマり所があったり、SEO的にはどうなるんだろうと思う所がありましたが、ここまで対応できれば普通に使えそうですね。
また何かあったら追記しようと思います。