• CREATIVE

February 07.2019

ScrollMagicとcssを使って簡単にスクロールアニメーションを実装しよう!

こんにちは、常時マスクつけっぱなしという風邪予防に全力で挑んだ結果、耳がちぎれる寸前のディレクターの小谷です。

今回は耳に優しいマスク……ではなく、ScrollMagicを使ってスクロールアニメーションを実装する方法をご紹介します。

JavaScriptが苦手な方にも実装できるよう、できるだけ簡単な方法でお伝えできればと思います。
※今回ご紹介するのはバージョン2系のお話ですのでご注意ください。

ScrollMagicとは

ScrollMagicはJavaScriptライブラリのひとつで、その名の通り「スクロール」に関係するアクションを制御できるJavaScriptとなっています。

どんなことができるようになるかと言うと、例えばサイト内で指定した位置に到達した時点で、文字を下からふわっと出現させたり、スクロール量に応じて形を変えることができます。

また、追加コンテンツをajaxを使って読み込むことで、永遠にスクロールできるようなことも実装可能です。

今回特定のスクロール位置で何かアクションを起こせるトリガーを設定できるということだけ理解してもらえれば、まず問題ありません。

▼ScrollMagic(こちらからダウンロードも可能です)
http://scrollmagic.io/

ScrollMagicを使用してアニメーションを実装しているサイトたち

使い方の前に、実際にScrollMagicが使われているサイト例を見てみましょう。

ちなみに以前僕が書いた記事のサイトにも使われているので、合わせてご覧になってもご参考になるかと思います。

▼Webサイトに面白いアニメーションを実装させたい!動きが気持ち良いサイト6選
https://www.ozlink.co.jp/lab/87/

音吉グループオフィシャルサイト

nikubiru

URL:http://www.nikubiru.com/

イーコンセプト株式会社

econcept

URL:https://econcept.jp/

アートバンライン株式会社

artvanlines

URL:https://www.artvanlines.co.jp/

使い方

まずはサンプルコードをまとめて書きますのでこれを分解していきます。

基本はこれだけです。

一応解説すると、.testという要素を起点として#test-objectという要素にクラス名“active”が付いたり取れたりします。ではここから上記コードを分解していきます。

スクリプトの読み込み(CDN利用の場合)

CDNがありますので利用すると手っ取り早く実装できます。何も考えずに記述しましょう。

Controllerの生成

※全体を制御するものですので、こちらも何も考えずに入れてください。

Sceneパラメータの作成

ここから要素に対して制御する指示を記述していきます。
今回はtriggerElementというパラメータを利用して“.test”というクラス名を指定しました。
パラメータにはtriggerElementの他にも下記の指定が可能です。

パラメータ一覧

duration
デフォルト値:0
シーンの長さ・距離を設定できます。アクションが起こってから終了させたい距離を数値で入力できます。
例) duration: 500
offset
デフォルト値:0
Sceneをスタートさせる開始位置の微調整を数値で決めることができます。ただし、triggerElementが定義されていない場合は0地点(ページ開始位置)からoffsetで定めたpx分スクロールした後にSceneが開始されます。
例) offset: 200
triggerElement
デフォルト値:null
ターゲットとなる要素を指定できます。クラス名やIDを指定することができます。
例)triggerElement: .test or #test
triggerHook
デフォルト値:onCenter
動作の開始位置を制御できます。対象要素がどの地点にあるタイミングでアクションを起こすのかを制御できます。検証される場合は下記URLを参考にしてください。
http://scrollmagic.io/examples/basic/scene_manipulation.html
例)onEnter = 1、onCenter = 0.5、onLeave = 0
reverse
デフォルト値:true
スクロールを戻した(上にスクロール)場合にアクションを逆再生させるかどうかを指定できます。
例)reverse: false(逆再生させない)
loglevel
デフォルト値:2
デバッグ用のログレベルを指定できます。指定値は数値となります。
例) 0 = 沈黙、1 = エラー、2 = エラー、警告、3 = エラー、警告、デバッグ情報

上記のようにSceneの指定から様々に指定できることがわかりますので、使い勝手がかなり良いです。

メソッドやイベント(アクション)の指定

ここがイチバンの肝です。様々なアクションの設定を行うことができます。

今回は「できるだけ簡単に」がテーマなので、activeというクラス名を付与し、cssでアニメーションを実装します。

メソッドやイベントに関してはここでは書ききれないので、下記にSceneについてまとめられているURLを記載しますので、より深く触ってみたい方はぜひ見てみてください。

また、ScrollMagicはjQueryやTweenMaxなどと掛け合わせて使用することも可能ですので、JavaScriptに対して苦手意識がなければ取り入れることで、アニメーションの幅もぐっと広がります。

▼ScrollMagic Scene(英語のみ。ただし翻訳機能をご使用になられるとほぼ理解できる日本語となります)
http://scrollmagic.io/docs/ScrollMagic.Scene.html

以上の設定で完了です。

サンプル紹介

ここからはScrollMagicとcssだけで実際にどんな表現ができるのかサンプルを使ってお見せします。

実は弊社リクルートサイトの一部にも使用していますのでぜひご覧ください!

▼参考URL(Oz link Recruit – Oz link Data)
https://www.ozlink.co.jp/recruit/data/

サンプル1 遅れて表示させる


こちらのアニメーションはcssでtransform scaleの初期値を0に指定してまず通常状態を表示させないように制御しています。

出現させる際にactiveというクラスに対してtransform scaleの値を1にする、ただこれだけです。

遅れて表示させる場合は.type02というクラス名に対してtransition-delay: 0.4s;をかけているだけです。

その他のcssの記述は飾りづけなので、気にしなくても問題ありません。

サンプル2 連続してフェードインさせる

連続して出すとなると1つずつアニメーションの設定が必要かと思われますが、JavaScriptでまとめて制御ができます。

ここでは各要素を0.3秒ずつ遅れて1秒かけて表示するという記述をしています。

こういった方法を使えば記述量を抑えられ、多くの要素に対してアニメーションをかけているようにも見せることができます。

まとめ

いかがでしたか? スクロールアニメーションを使うと今まで動きのなかったサイトの印象が一気に変わります。

でも難しそう、ややこしいコード書かなくちゃ無理なんじゃないか、などとお考えの方は、まずは上記のようなcss組み合わせ型のシンプルな実装から始めても良いと思います。

その中でこだわりたいアニメーションが出てきたときに、アニメーションについてじっくり勉強してみると意外とスッと理解できるかもしれません!

まずは最初のステップとしてScrollMagicで色々と動かしてみてはいかがでしょうか。

僕もまだまだScrollMagicを使いこなせているわけではないので、また新しい動きのサンプルなどができたら更新していきたいと思います。