ふんばりフロントエンジニアのブログスマートフォン用の表示で見るふんばりフロントエンジニアのブログ新米フロントエンジニアのふんばっている日々と備忘録です。2019-04-01【ScrollMagic】onメソッドとは?簡単な例を紹介しますしばらく暇らしいので連投します(笑)前回に引き続き、webページのアニメーションをさせる際によく使うライブラリであるScrollMagicについてお話していこうと思います。ScrollMagicはその名の通り、スクロールをして指定した要素に到達した際にイベントやらアニメーションを発火させるやらができるライブラリです。簡単な例は以下の通り。CodePen.こちらは、指定した要素に到達したらその要素を指定した時間(duration)分ピン留するという処理となっています。このように、ScrollMagicの組み込みのメソッドで色々できる場合もありますし、組み込みのメソッドではないとできない処理などもあります。上記の例のようなピン留やGSAPと連携したsetTweenメソッドなどがその例でしょう。クラスを追加したい場合などもあるわけですよね。そんな時によく使うのが「on」メソッドです!onメソッドは、簡単に言ってしまえばコールバックを使うことができるメソッドです。CodePen.こちらは、「trigger」クラスに到達したら「changeColor」クラスを付与して、離れたらクラスを取り除くという処理になっています。このように、onメソッドのイベントリスナとしてenterやleaveを利用することができ、そのコールバックとして第二引数の関数を実行することができるわけです。tweenアニメーションのセットなどはsetTweenメソッドで組み込むしかありませんが、簡単なクラスの付与はonメソッドを使った方がいいでしょう。ちなみに、使えるイベントハンドラはこんな感じ。changeupdateprogressstartendenterleaveそれぞれの使い所は様々ですが、個人的にはenter、leave、center、progressくらいがよく使うイメージです。今回の案件では、全てTweenアニメーションで実装したわけではなく一部CSSアニメーションを使った部分もあり、アニメーションをクラスで管理していたのでonメソッドはかなり重宝しました!ScrollMagicは一見ややこしい部分もありますがなれたらかなり便利なライブラリなので、これからも積極的に使っていきたいですね。最近はシ...2018-10-03人気ライブラリ「TweenMax」と「ScrollMagic」で簡単にスクロールアニメーションを実装...さて、今回はアニメーションライブラリを使ってみよう!という...2018-08-24Seleniumでブラウザテストを自動化!Javaでブラウザを動かそう!今回はブラウザテストについてお話ししようと思います。»プロフィールid:ma1129nm新米フロントエンジニアのふんばっている日々と備忘録です。【ScrollMagic】onメソッドとは?簡単な例を紹介します月別アーカイブはてなブログをはじめよう!ma1129nmさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。