必要なファイル 作成する上で必要になるファイルは、下記の4点。 ScrollMagic本体 汎用クラスが記述されたjavascript アニメーションを記述したcss html 実装の手順 はじめに全体が見えたほうがわかりやすいと思うので、全容をcodepenにまとめました。まずはこちらをご覧ください。 See the Pen GEoZBR by maroc (@maroc) on CodePen. スクロールすると、TITLEの文字、テキストがふわっと出てきました。 では、これを実現する実装の流れをステップにまとめましたので、見ていきましょう。 《STEP1》 動かしたい箇所のhtmlに.js-scroll-fadeクラスをつける 今回は、タイトルとテキストをふわっとアニメーションさせていきたいので、.page__title、.page__textをもつクラスに.js-scroll-fa
![ScrollMagicで簡単実装!「ふわっ」と文字が現れるスクロールアニメーション | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/63a1db3701ee562198766af34a9bfb3c8cab1b3e/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2017%2F07%2F149994770840642700_59.png)