スクロールしたとき表示領域がどの要素に入っているのかを判別してみる『ScrollMagic』

Title

Date

2019-08-19

どんなものができるのか

動画

https://youtu.be/9kMGyCMBOsg

Web ページ

以下ページより実際の動作をご確認いただけます。

https://korsmic.github.io/JWS-Blog/scrollmagic_toggleClass/

用途

主に縦に長い LPや、年表のようなコンテンツなどで使われることが多いかと思います。コンテンツが長いと、ユーザーにとっては迷子になりやすく、配慮が必要です。 ユーザビリティを上げるためにも、オススメです。

使用ライブラリ紹介

SctollMagicというライブラリを利用しています。

公式サイトはこちら https://scrollmagic.io/

使うメソッド（関数）はこちら https://scrollmagic.io/examples/basic/class_toggles.html

HTML・CSS 実装例

HTML で各種ライブラリを読み込む
ナビに ID を振る
ナビにhover時とclass付与時に色が変わるなどのスタイルを充てる
コンテンツの各セクションに id を振る

といった感じになります。

ナビ周りの HTML

ナビ周りの HTML は以下のような感じです。

<nav class="gnav">
  <div class="inner">
    <ul class="gnav__lists">
      <li id="nav01" class="gnav__list">
        <a href="#sec01"><span>Contents1</span></a>
      </li>
      <li id="nav02" class="gnav__list">
        <a href="#sec02"><span>Contents2</span></a>
      </li>
      <li id="nav03" class="gnav__list">
        <a href="#sec03"><span>Contents3</span></a>
      </li>
      <li id="nav04" class="gnav__list">
        <a href="#sec04"><span>Contents4</span></a>
      </li>
      <li id="nav05" class="gnav__list">
        <a href="#sec05"><span>Contents5</span></a>
      </li>
    </ul>
  </div>
</nav>

コンテンツ周りの HTML

コンテンツ周りの HTML は以下のような感じです。

<section id="sec01" class="content content-01">
  <div class="inner">
    <h2>Contents1</h2>
  </div>
</section>
<section id="sec02" class="content content-02">
  <div class="inner">
    <h2>Contents2</h2>
  </div>
</section>
<section id="sec03" class="content content-03">
  <div class="inner">
    <h2>Contents3</h2>
  </div>
</section>
<section id="sec04" class="content content-04">
  <div class="inner">
    <h2>Contents4</h2>
  </div>
</section>
<section id="sec05" class="content content-05">
  <div class="inner">
    <h2>Contents5</h2>
  </div>
</section>

JS の実装例

ここからがメインの JS の実装になります。

とくに公式サンプルと異なる点としては、duration（どこまでの範囲とするか）という箇所を実際の高さを取得して設定する箇所になります。

重要な個所

重要な個所だけ以下にまとめます。

new ScrollMagic.Scene({
  triggerElement: '.content-01', //どこを起点とするか
  duration: $('.content-01').outerHeight() //ここで各コンテンツの高さを取得してdurationを決める。
})
  .setClassToggle('#nav01', 'is-active') //上で設定した範囲内になったらclassをつけて、範囲外になったら外すというメソッドを入れる（今回はis-active）を付け替えます。
  .addTo(controller);

全体実装例

全体は以下のようになります。

$(function () {
  var controller = new ScrollMagic.Controller();
  // 各コンテンツ事にSceneを作成
  new ScrollMagic.Scene({
    triggerElement: '.content-01',
    duration: $('.content-01').outerHeight()
  })
    .setClassToggle('#nav01', 'is-active')
    .addTo(controller);

  new ScrollMagic.Scene({
    triggerElement: '.content-02',
    duration: $('.content-02').outerHeight()
  })
    .setClassToggle('#nav02', 'is-active')
    .addTo(controller);

  new ScrollMagic.Scene({
    triggerElement: '.content-03',
    duration: $('.content-03').outerHeight()
  })
    .setClassToggle('#nav03', 'is-active')
    .addTo(controller);

  new ScrollMagic.Scene({
    triggerElement: '.content-04',
    duration: $('.content-04').outerHeight()
  })
    .setClassToggle('#nav04', 'is-active')
    .addTo(controller);

  new ScrollMagic.Scene({
    triggerElement: '.content-05',
    duration: $('.content-05').outerHeight()
  })
    .setClassToggle('#nav05', 'is-active')
    .addTo(controller);
});