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

Title

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

Date

2019-08-19

Web アニメーション周りの知識が付いてきましたので、今後はとくに Web アニメーション周りの情報を発信していこうと思います。

アニメーションの様子を動画にまとめ、youtube に UP することで、SNS でより見てもらえるかと思い、アニメーション周りは動画もつけるようにします。

今回は、ユーザーのスクロールに合わせてナビの class を付け替えることで、ユーザーが現在どのコンテンツを見ているのか、分かりやすく表示させる表現をご紹介します。

どんなものができるのか

動画

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);
});

まとめ

いかがでしたでしょうか。

公式サンプルでclass の付け替えができるとあったのですが、以前はdurationの設定がよくわからず、無理やり実装したこともありました。 要素の高さを取得してあげて、duration に入れてあげれば OK です。

使うことも比較的多い内容かなと思いますので、ぜひ取り入れてみてください。 取り入れることで、長いページではユーザビリティが上がると思います!

制作パートナー(外注)をお探しの制作会社様・広告代理店様

お気軽にお問い合わせください。