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

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

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

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

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

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

どんなものができるのか

動画

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です。

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

ポートフォリオ・お問合せはこちら