スクロールしたとき表示領域がどの要素に入っているのかを判別してみる『ScrollMagic』
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 です。
使うことも比較的多い内容かなと思いますので、ぜひ取り入れてみてください。 取り入れることで、長いページではユーザビリティが上がると思います!