こんにちは、づやです。
前回ScrollMagic2系について下記の記事を書きましたが、基本的な使い方しか書けなかったので、今回はよく使う機能について書きたいと思います。
ScrollMagic2系を使って、スクロールに応じたアニメーションをさせてみよう
Kazuya Takato
個人的にTweenMaxをよく使うので、animation.gsap.jsを読み込んでる状態での記事となります。
setClassToggle
スクロールの位置によってクラスを付けかえたいときは非常によくあるかと思います。そんなときは、スクロールに応じてクラスを付けたり外したりしてくれるsetClassToggleの出番。
<ul>
<li id="list1"><a href="#block1">1番目</a></li>
<li id="list2"><a href="#block2">2番目</a></li>
<li id="list3"><a href="#block3">3番目</a></li>
</ul>
<section id="block1">
ここにいろいろ書きます
</section>
<section id="block2">
ここにいろいろ書きます
</section>
<section id="block3">
ここにいろいろ書きます
</section>styleは省略しますが、上記のようなマークアップをしておいて下のような記載をします。
// 全体を制御するコントローラをつくります。
var controller = new ScrollMagic.Controller();
// トリガーになる位置を指定してアニメーションを設定します。
var scene = new ScrollMagic.Scene({
triggerElement: "#block1", // シーンで発火の対象となる要素を指定しましょう。
duration :400 // スクロールの距離をpxで記載します（2系は%でもいけます）。
})
.setClassToggle("#list1", "active") // セレクタ,class名を渡します。対象のセレクタにトリガーのタイミングで対象のセレクタのクラスを付けたり外したりしてくれます。
.addIndicators()
.addTo(controller);
var scene2 = new ScrollMagic.Scene({
triggerElement: "#block2",
duration :400
})
.setClassToggle("#list2", "active")
.addIndicators()
.addTo(controller);
var scene3 = new ScrollMagic.Scene({
triggerElement: "#block3",
duration :400
})
.setClassToggle("#list3", "active")
.addIndicators()
.addTo(controller);実際に書く場合はfor文とかを使ってもっとコンパクトに書けますが、1個1個書いていくとこんな感じになります。
このように書くことで、スクロールに応じて対象のliにactiveクラスを付けたり外したりしてくれます。当然liだけでなく、他の要素にクラスを付けたり外したりも可能です。
対象のクラスにtransitionを設定しておけばアニメーションをさせることもできるので、なかなか便利です。
enterとleave
setClassToggleはクラスの付け替えをしてくれますが、そうじゃなくて独自にもっといろいろおこないたいときもありますよね。
そんなときは、スクロールに応じて指定した動きをおこなえるイベントenterとleaveを設定することで実現できるようになります。
マークアップは先ほどの例と同じだとして、下記のような記載をします。
// 全体を制御するコントローラをつくります。
var controller = new ScrollMagic.Controller();
// トリガーになる位置を指定してアニメーションを設定します。
var scene = new ScrollMagic.Scene({
triggerElement: "#block1", // シーンで発火の対象となる要素を指定します。
duration :400 // 対象のスクロール距離です。設定しないとleaveが発火しない模様。
})
.on("enter" , function(e){ // triggerElement（と指定したtriggerHook）に到達したタイミングで呼ばれます。
console.log("enter");
console.log(e); // progress（0から1の間で現在のパーセンテージの値）などいろいろ入ってます。
})
.on("leave" , function(e){ // triggerElement（と指定したtriggerHook）の外に到達したタイミングで呼ばれます。
console.log("leave");
console.log(e); // enterのときとおんなじ情報がとれます。
})
.addIndicators()
.addTo(controller);動作の仕組み自体はsetClassToggleとほぼ同様ですが、独自に処理をかけるので用途が広がります。個人的にはprogressの値に応じて、何かを動かしたいときに使うことが多いです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
