ScrollMagic を使ってみる

はじめに

ここでは以下の動画を参考にして ScrollMagic を使ってみることにする。

 

使ってみる

ざっくりとプロジェクトを作成する。

 

HTML ファイルから JS ファイルを参照しておく。

f:id:matt-note:20190319181306p:plain

 

スクロールしてアニメーションする処理を記述する。ここでは ScrollMagic を初期化して、①アニメーションする要素を指定して、②追加する class の値を設定する。ここでは #project01 要素に fade-in という class の値を設定する。

f:id:matt-note:20190319182747p:plain

 

CSS でアニメーションの速度と opacity を設定しておく。

f:id:matt-note:20190319183000p:plain

f:id:matt-note:20190319183355g:plain

 

Indicator を表示してみる。

f:id:matt-note:20190319183750p:plain

f:id:matt-note:20190319183906g:plain

-> デバッグ用の Indicator を表示できる。