スクロール量に応じてアニメーションを行いたい場合、さまざまな方法が思いつきますが、上下スクロールでスクロールと連動させたアニメーションを実装したいのならScroll Magicが有名かと思います。
TweenMaxも使えるので、複雑なアニメーション作成におすすめです。
簡単ですが、使い方を。
Scroll Magicの読み込み
まずはScrollMagicを読み込みます。
以下はCDN
ちなみに2行目はデバッグ用になります。
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>NPM
npm install scrollmagicサイトからダウンロードしてきてもいいです。
Scroll Magicの使い方
それでは使っていきます。
コントローラー宣言
まずはコントローラーを宣言します。
const controller = new ScrollMagic.Controller();次に作るのがシーンです。
シーンの作成
const scene = new ScrollMagic.Scene({
triggerElement: "#target",//どの位置で発火させるか
triggerHook: 'onEnter',//トリガーの位置 /onEnter/onLeave デフォルトはonCenter
offset: 200,//スタート位置はトリガーから200px
duration: 1000,//終了距離
reverse:false, //逆戻りの時は実行しない
})
.setPin("#target", {pushFollowers: false})// この要素を一定期間固定させています。
.addIndicators({name: "ScrollMagicAnim1"});//debugコードを読みこんでいる場合、これでシーンのいろいろな情報が画面に表示されます。なんのアニメーションか名前を登録できます。
scene.addTo(controller);// 作成したシーンを宣言したコントローラに設定します。TweenMaxなどでアニメーションを登録する場合は以下です。
const scene = new ScrollMagic.Scene({
//...(省略)
})
.setClassToggle("#target","active") //クラスのtoggle
.setTween(tween);//発火時のアニメーションを登録
scene.addTo(controller);簡単ですが備忘録に。
