- - 【ScrollMagic】ってなに？
- - Horizontal Scroll with GSAP and ScrollMagic
- - SVG Video Mask Animation - ScrollMagic & Greensock
- - WWF: Header Transition (Dribbble by: Nathan Riley)
- - Scroll apple watch
- - Sprite Motion w/ScrollMagic
- - GSAP ANIMATION PIZZA LANDING PAGE
- - ScrollMagic horizontal scroll
- - Scroll-animation
- - Scrolling SVG Clock - NetMag Tutorial
- - scroll through image sequence
- - Apple iPhone SE Color Transition Remake (ScrollMagic & TimelineMax)
- - Element follow path - car on the road
- - 最後に
今回は【ScrollMagic】を使ったスクロール連動アニメーションのスニペットをまとめてみました。
スクロールで要素がフェードインするようなアニメーションは前回、ご紹介した以下も是非ご覧ください。
【ScrollMagic】ってなに？
【ScrollMagic】はスクロールに合わせて要素を操作できるJavaScriptのライブラリです。
【ScrollMagic】単体で使うより、アニメーション系の【TweenMax】などと組み合わせて使用することが多いと思います。
スクロールイベントで画面内に入ったらフェードインなどの基本的なアニメーションから、スクロールに合わせたアニメーションの指定まですることができます。
今回は、【ScrollMagic】を使用したスクロールに合わせたアニメーションを中心にスニペットをご紹介していきます。
ScrollMagicのダウンロードはこちら
（MITライセンス）スクロールに合わせて横方向にスライドするレイアウトを実装しています。 【ScrollMagic】らしく、スライドまで行くと横スクロールになるのが良いですね。こういうレイアウトが組めると幅が広がります。
【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
シンプルですが、スクロールに合わせて装飾が拡大して、アニメーションが終わると次のセクションに移動します。
スクロールに合わせてアニメーションさせたり、レイアウト固定したりと【ScrollMagic】ならではのアニメーションが参考になります。
【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
コンテンツの位置に合わせてライオンの背景がアニメーションで切り替わります。
【ScrollMagic】の他【TweenMax】や【jquery.fullpage】が使われています。
スクロールに合わせてapple watchが回転するシンプルな【ScrollMagic】アニメーションです。
【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
スクロールに合わせて飲み物を飲むお兄さんがアニメーションします。 右側に【ScrollMagic】のhelperを残してくれているので、「trigger」と「start」のアニメーション発火が分かりやすいですね。
スクロールに合わせてgifアニメのようなアニメーションは使いたい部分も多いと思うので参考になりますね。
スクロールに合わせてピザが出来上がる面白いアニメーションです。 要素の重ね合わせアニメーションやコンテンツ固定が実装されています。
水平方向のスクロールアニメーションです。
【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
スクロールに合わせてスマホ(?)がゆらりゆらりと動くアニメーション。 一つの要素がコンテンツを跨いでアニメーションするのが面白いですね！
【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
スクロールに合わせて時計の針が動くアニメーション。アイデアも面白いですね！テキストも時間帯によって変更されます。
【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
スクロールに合わせて真ん中の数字と背景が変化します。
IE11でも動きます。
スクロールに合わせて画像や文字の色が変化していきます。Appleのサイトでもありそうでな演出ですね！
【ScrollMagic】の他【GSAP】のライブラリが使われています。
スクロールに合わせて赤丸がパス沿って動きます。 パスとの組み合わせは参考になりますね！
【ScrollMagic】の他【TweenMax】やSVG系のプラグインが使用されています。
最後に
今回は【ScrollMagic】を使ったスクロール連動アニメーションのスニペットをまとめてみました。
スクロール連動型のアニメーションが実装できる点が面白いですね。 さらにSVGと組み合わせるといろいろなアニメーションが実装できそうです。