フロントエンド弱い自分でも、かなりぐりんぐりんなスクロールアニメーションを実装出来たので、その時のメモ。
TweenMaxとは
任意のアニメーションを実現できるJavaScriptライブラリ。
GreenSockが作っている。TweenLiteという軽量版もある。
GreenSock | TweenMax
https://greensock.com/tweenmax
こんな風に書きます。
cssアニメーションのkeyframeみたいに前の状態(from
)と後の状態(to
)を決めて、
こんなことができます。
ScrollMagicとは
スクロールアニメーションを作るためのJavaScriptライブラリ。
TweenMaxで作ったアニメーションの、時間軸をスクロール量に置き換えたり、特定のスクロール位置に達したら何かのアニメーションをトリガーするなどしてスクロールアニメーションを作る。
ScrollMagic ♥ Demo
http://scrollmagic.io/
例がいっぱいあって、けっこうときめきます。
Examples - ScrollMagic
http://scrollmagic.io/examples/index.html
複数アニメーションを入れるためのTimelineMax
複数のアニメーションを入れるときはこちら。
GreenSock | TimelineMax
https://greensock.com/timelinemax
(今後デモを追加する予定。。。)