ScrollMagicで簡単スクロールアニメーション!使い方を解説

ScrollMagicで簡単スクロールアニメーションさせる方法を解説します。ここでは主にScrollMagicを用いてフェードインのアニメーションをさせる方法について解説します。またScrollMagicの使い方についても解説します。

コンテンツ [表示]

  1. 1ScrollMagicとは?
  2. 2ScrollMagicの使い方
  3. 2.1フェードインアニメーションを作成してみよう
  4. 2.2サンプルコードの解説
  5. 3ScrollMagicの関連情報
  6. 4まとめ

ScrollMagicとは?

ScrollMagicとはWEBサイトのスライドに応じて様々な操作をすることができるJavaScriptのライブラリです。

またScrollMagicを用いるとスクロールに合わせてアニメーションを行うことができます。

では以下の項目でScrollMagicの使い方とScrollMagicを用いてフェードインさせる方法を見ていきましょう。

Photo bymarvorel

ScrollMagicの使い方

ScrollMagicを用いるにはまずCDNなどを用いてスクリプトを読み込む必要があります。

またjQueryも利用する必要があります。
それぞれのCDNはこちらになります。

jQueryとScroll MagicのCDN

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- ScrollMagic -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

フェードインアニメーションを作成してみよう

それではScrollMagicを用いてフェードインアニメーションを作成してみたいと思います。

まずはサンプルコードを用いて挙動を確認してみましょう。

このようにフェードインされていることが分かります。

サンプルコードの解説

まずScrollMagicを用いるには、下記を設定します。

ScrollMagicの設定の基本

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({  
  //Sceneの指定
});

今回はSceneパラメータとしてはtriggerElementを用いてスクロールアニメーション発火対象であるfadeクラスを設定しています。

Sceneパラメータの種類は多いため、詳しくは以下のサイトを参考にしてください。

ScrollMagicのSceneパラメータの種類
ScrollMagicのSceneパラメータの種類

フェードインさせるために、画面表示時はフェードインさせたいHTML要素が消えている必要があるため、CSSでdisplay: none;を用いて要素を隠しています。

次にsceneがenterイベントを受け取ったときにアニメーションさせるためのコードとなっています。

アニメーションさせるためのコードでは、Qumeruが入っているdiv要素それぞれに対して0.3秒ごとにフェードインされるように設定しています。

ScrollMagicの関連情報

ScrollMagicは他にも様々な使い方ができます。

例えばスクロールに合わせて複数の画像レイヤーを異なるスピードで動かすことにより、視差効果を利用して立体的に見せるテクニックであるパララックスを作成でき、ユーザーにインパクトを与えることができます。

その方法については以下の記事で解説しています。

あわせて読みたい
ScrollMagicを使ったパララックスのサンプルを紹介!のイメージ
ScrollMagicを使ったパララックスのサンプルを紹介!
ScrollMagicを使ったパララックスのサンプルを紹介します。またパララックスを作成するには、TweenMaxも必要となるため、ScrollMagicとともに用いるTweenMaxの使い方と合わせて、サンプルコードを用いて解説します。

またScrollMagicにTweenMaxを組み合わせることで、様々なアニメーションを簡単に作成することができます。

その方法についてついては以下の記事で解説しています。

あわせて読みたい
ScrollMagicとTweenMaxを使ってアニメーションさせる方法!のイメージ
ScrollMagicとTweenMaxを使ってアニメーションさせる方法!
ScrollMagicとTweenMaxを使ってアニメーションさせる方法について解説します。ここではScrollMagicとTweenMaxを使ってアニメーションさせるサンプルをいくつか作成し、そのコードの解説まで行います。

まとめ

いかがでしたでしょうか?

ScrollMagicを習得しておくことで、様々な実装が可能となります。

ScrollMagicの関連情報で紹介した記事と合わせて、ぜひScrollMagicを習得してください。

GeekHive採用サイト

関連記事