簡単に画面いっぱいの縦スクロールページが作れるScrollifyの使い方

ハル

2017.07.18

おはこんばんにちは、はるです。

LPなどでよく見かける縦長のサイトで、各セクションが画面いっぱいに広がるページを、プラグインで簡単に作る方法を紹介したいと思います。

今回の記事では、このようなベースを作成していきます。

Scrollifyについて
基本の使い方
応用の使い方
- ページャーをつける
- スライド時にアニメーションをつけたい
まとめ

Scrollifyについて

デモサイト：https://projects.lukehaas.me/scrollify/
github：https://github.com/lukehaas/Scrollify

利用するのは、「Scrollify」というプラグイン。
デモサイトにあるような、各セクションごとにひっつくようなレイアウトを簡単に制作できます。セクションで画面の高さを超える場合、そのセクション内でスクロールができるようにしてくれるのが特長です。

githubの履歴からわかるように、リリースが2014年と新しくなはいプラグインですが、他のものと比べ使いやすかったため、紹介したいと思います。

基本の使い方

GitHubからJSファイル（jquery.scrollify.min.js）が公開されているので、そちらから用意します。

必要なJavaScriptの用意

2017年6月時点ですと、jQuery 1.7以上が必要になります。jQuery読み込み後、このScrollifyプラグインを読み込みます。

▼例

<script src="./script/jquery-1.12.4.js"></script>
<script src="./script/jquery.scrollify.js"></script>

HTMLの用意

.js-sectionが、画面ごとにフィットするエリアになります。
data-section-name属性を用意します。この値が、URLの//hoge.com/index.html#section1のように切り替わります。ページ内リンクの時にも使用するので、指定を忘れずにします。

<section class="section section-blue js-section" data-section-name="section1">
    <div class="section-content">
        <!-- (省略) -->
    </div>
</section>
<section class="section section-red js-section" data-section-name="section2">
    <div class="section-content">
        <!-- (省略) -->
    </div>
</section>
<section class="section section-blue js-section" data-section-name="section3">
    <div class="section-content">
        <!-- (省略) -->
    </div>
</section>

CSSの用意

簡単なレイアウトをするCSSを作ります。
.js-section が横幅縦幅にフィットするようJavaScript側でレイアウトします。その中に、divタグなど（例では.section-content）を用意します。中のdivタグにマージンを設定することがポイントです。

.section {
  width: 100%;
}
.section-content {
  max-width: 300px;
  margin: 0 auto;
  padding: 40px 60px;
  text-align: center;
}

h2 {
  color: #232323;
  &:first-child {
    margin-top: 0;
  }
}

h3 {
  color: #232323;
}

p {
  color: #232323;
}

.section-red {
  background-color: #ff6363;
}

.section-blue {
  background-color: #8fbbff;
}

.section-green {
  background-color: #fff;
}

scrollifyを実行する

「$.scrollify(option);」で実行します。option変数には、指定されたオプションを指定します。
最低限必要なのが、sectionで画面幅いっぱいに広がる対象の指定です。今回の例だと「.js-section」を指定します。

var option = {
  section : '.js-section', // 対象を指定
  easing: "swing", // イージングをしてい(jQueryのanimation)
  scrollSpeed: 600, // スクロール時の速度
  scrollbars: true, // スクロールバーを表示するか
};

$(function() {
  $.scrollify(option); // scrollifyの実行
});

ここまでで確認

これだけで、基本的な各セクションごとが画面にフィットするような動きになります。
もし、セクションの中（今回の例だと.section-content）で画面高さを超える場合は、スクロールができるようになっていると思います。

応用の使い方

ページャーをつける

HTML

HTMLを編集します。
div.mainで、先ほどのsectionタグをすべて囲い、ul.pagerを用意します。JavaScriptで操作するために、ul.pagerにはid名をつけました。

<div class="main">
  <!-- (省略) -->

  <ul class="pager" id="js-pager"></ul>
</div>

JavaScript

JavaScriptも基本で作成したところから追記していきます。

まず、使い回すものは変数に用意しています。

var $section = $('.js-section'); // 各スライド
var $pager = $('#js-pager'); // ページャー枠

optionに追記もしています。

「afterRender」はScrollifyが初回実行されたあとに実行したい処理を書きます。
今回は、ページャーを作成するタイミングはここで行います。後述しますが、createPager関数を作成したので呼び出しています。

「before」はスクロールし次のセクションに移動する直前に実行する処理です。
つまり、ページが切り替わるタイミングに行いたい処理を書きます。今回は、ページャーが切り替わる処理を行います。後述しますが、pagerCurrent関数を作成したので呼び出しています。

// scrollifyのオプション設定
var option = {
  section : '.js-section',
  easing: "swing",
  scrollSpeed: 600,
  scrollbars: true,
  before:function(index, section) {
    pagerCurrent(index); // ページャーに対応する順番にクラス名を付与
  },
  afterRender:function() {
    createPager(); // ページャーの作成
  }
};

$(function() {
  $.scrollify(option); // scrollifyの実行
});

ページャーの作成処理をcreatePager()関数としてまとめました。区切っているセクションを数えてliを作成しています。

セクションを移動するためのリンクは「data-section-name」属性の値を受け取りaタグにセットしています。クリックされたときは、「$.scrollify.move(‘val’)」メソッドが用意されています。

「val」の部分に「data-section-name」属性で指定されている値を指定すると、対象セクションまでスクロールされます。

// ページャーの作成
function createPager() {
  $section.each(function(i, e){
    // ページ内リンク先の作成
    var sectionName = $(e).attr('data-section-name');
    // 最初のliにはクラスを付与
    var addClass = '';
    if (i === 0) {
        addClass = 'is-current';
    }
    // liのHTML作成
    var html = '';
    html += '<li class="' + addClass + '">';
    html += '<a href="#' + sectionName + '"></a>';
    html += '</li>';
    $pager.append(html);
  });
  
  pagerLink();
}

// ページャーでaタグをクリックされたらスクロールする
function pagerLink () {
  $pager.find('a').on('click', function() {
    $.scrollify.move($(this).attr("href"));
  });
}

「pagerCurrent()」関数を用意していました。
これで、セクションが切り替わったときページャーも変化するよう、クラスの付け替えを行っています。

// ページャーに対応する順番にクラス名を付与
function pagerCurrent(index = 0) {
  var $li = $pager.find('li');
  $li.removeClass('is-current');
  $li.eq(index).addClass('is-current');
}

CSS

最後にページャー用のCSSを追加します。

.main {
  position: relative;
}
.pager {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0;
  li {
    display: block;
    margin: 20px;
    a {
      display: block;
      width: 10px;
      height: 10px;
      background: #fff;
      border-radius: 50%;
    }
  }
  .is-current {
    a {
      background: #232323;
    }
  }
}

スライド時にアニメーションをつけたい

optionの「before」と「afterRender」にsetCurrent関数を呼び出します。「before」では、現在位置の「index」を引数にセットします。
setCurrent関数については後述します。

// scrollifyのオプション設定
var option = {
  // (省略)
  before:function(index, section) {
    setCurrent(index); // 現在のsectionにクラスを設定
    pagerCurrent(index); // ページャーに対応する順番にクラス名を付与
  },
  afterRender:function() {
    createPager(); // ページャーの作成
    setCurrent(); // 現在のsectionにクラスを設定
  }
};

setCurrent関数を作成します。
「index」を引数で受け取っていた場合「before」コールバックから来ているので、その値により、指定のsectionにクラスを付与しています。

// 現在のsectionにクラスを設定
function setCurrent(index = 0) {
  // 一旦、すべてのsectionのクラスをとる
  $section.removeClass('is-show');
  // 現在のsectionのみにクラスを付与
  $section.eq(index).addClass('is-show');
}

CSS

「.section(.js-section)」にJavaScript側で「.is-show」の付け替えを行いました。「.is-show」が付いていたらアニメーションをするように設定します。
今回はopacityだけを操作しました。

.section {
  // (省略)
  // 追記
  &.is-show {
    .section-content {
      opacity: 1;
    }
  }

}
.section-content {
  // (省略)
  // 追記
  opacity: 0;
  transition: opacity .5s ease .75s;
}