デジタルマーケティングやデザイン・開発に関する情報やセルリアに関するトピックを更新。
運営メディアのピックアップコンテンツ、外部サイトへの寄稿記事なども公開しています。

ビジネスを成功へと導くWeb制作・インターネット広告・コンサルティング

Search

サイト内検索

初心者必見!ScrollMagicでスクロールアニメーションを実装する方法

更新:2023年12月19日 カテゴリ: デザイン・開発

みなさんこんにちは!エンジニアの高澤です! 今回はをJavaScriptプラグインであるScrollMagicを使ってスクロールアニメーションを作成する方法を解説したいと思います。

ScrollMagicとは

ScrollMagicとはスクロールアニメーションを簡単に実装可能にしてくれるライブラリのひとつです。

以下がライブラリの公式サイトになります。 ScrollMagicの公式サイトはこちらからご確認できます。

JavaScriptライブラリとは、あらかじめ特定の機能が用意されたJavaScriptのプログラムのことをいいます。JavaScriptライブラリを読み込ませておくことで、少ないJavaScriptコードで高機能な機能を簡単に実装することが可能です。

スクロール時に想定される欲しいさまざまな動きを実装することが可能で、例えばスクロール時にテキストなど要素を大きくしたり移動させたりすることが可能です。

スクロールアニメーションの実装方法

それでは早速ScrollMagicを使ってスクロール時にアニメーションを実装しましょう。

jQuery本体ファイルを読み込む

まず初めにjQueryの本体ファイルを読み込みましょう。

jQueryとは、JavaScriptを簡単で少ないコードで記述することができるためのライブラリのことをいいます。

ScrollMagicでは、jQueryベースのコードを利用するため、このjQueryを扱える環境を作るためにjQueryの本体ファイルの読み込みを事前におこなっておく必要があります。

jQuery公式サイトのjQuery本体ファイルを読み込むGoogle CDNのスニペット掲載ページへアクセスして、scriptコードをコピーしてください。

以下のscriptコードがコピーできるかと思いますので、コピーしてHTMLファイルやfooterファイルなどの下の方にペーストしてください。

上記jQueryの本体ファイルのScriptコードは随時更新されている可能性があるため、できればその都度上記ページにアクセスしていただければと思います。

ペーストできたら次に進みましょう。

ScrollMagicのCDNを読み込む

jQueryの本体ファイルの読み込みの次は、ScrollMagicのCDNを読み込む方法を解説します。

ScrollMagicの公式ページへアクセスしていただき、以下の部分のScrollMagicのCDNのスニペットをコピーしてください。

コード自体は以下になりますので、こちらからもコピーしてもかまいません。

ただし、jQueryの本体ファイルと同じで随時バージョンが更新されている可能性があるため、できればその都度公式ページへアクセスしていただき、確認してからコピーしていただければと思います。

ペースト先は、先ほど追加したjQuery本体ファイルの読み込みコードの下に追加してください。

機能を呼び出すJavaScriptコードを記述する

jQueryの本体ファイルの読み込みとScrollMagicの本体ファイルの読み込みが完了したら、今度はJavaScriptで機能を呼び出すコードを記述します。

上記のコードをjQueryの本体ファイルの読み込みとScrollMagicの本体ファイルの読み込みコードの下に追加してください。

ここまでで、ScrollMagicを使う準備は整いました。

HTMLをマークアップする

ScrollMagicを扱う準備完了したら、JavaScriptのDOMでHTMLのクラス属性などの記述がなされていますが、こちらの記述に合わせる形でHTMLを記述できます。

エンジニアの方ならわかるかと思いますが、JavaScriptの記述が変わればHTMLも変更し、HTMLが変わればJavaScriptも変更する必要がありますので、カスタマイズの際は気をつけてください。

CSSを記述する

最後にCSSを記述して要素をレイアウトします。

これでScrollMagicを利用したスクロールアニメーションの実装は完了です。 お疲れ様でした!

作成したページをご確認いただくと、下記のように四角い要素が2つアニメーションで表示されます。

最後にここまでの全てを反映したソースコードを掲載いたします。

もし手順通りに進めたとしてもなぜか動かないなどが起こった場合、上記のコードを丸々そのままHTMLファイルに全部コピー&ペーストしてみてください。

ScrollMagicのパラメータについて

ここで、ScrollMagicのパラメータについておまとめいたしましたので解説いたします。

下記の内容がパラメータになりまして、それぞれ必要なものを追加したり編集したり削除したりして柔軟にカスタマイズすることが可能です。

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

一例ですが、例えばパラメータを追加する際は下記のように記述して追加します。

上記のように、上new ScrollMagic.Sceneの中に追記して定義します。

まとめ

ScrollMagicを利用したスクロールアニメーションの実装方法の解説は以上になります。

当記事ではScrollMagicを利用したアニメーションの実装の手順を解説いたしましたが、実際の実務でも使えるように構成して執筆いたしました。

オプションに関してもおまとめし、実際に追加する際の一例まで解説しておりますので当記事を読み進めていただければ一つの実装とパラメータの把握まで可能でカスタマイズもご自身で行えるようになります。

そのためよろしければぜひ当記事を実際の実務に繰り返しお役立ていただけますと幸いです。

更新:2023年12月19日 カテゴリ: デザイン・開発

現状のデジタルマーケティングに課題をお感じですか?

デジタルマーケティング施策やWebサイトの機能・デザイン等を見直される際は、ぜひお声がけください。 貴社のご状況やご要望に合わせ、アクセス解析から数値的な根拠を持って課題点の抽出と改善に向けての施策を無料にてご提案させていただきます。

お問い合わせ

CONTACT

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティングの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。
そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。
助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけではない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。
Web制作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。
だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではないでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。
私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。
運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティン[続きを表示する]グの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけでない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。Web制[続きを表示する]作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではな[続きを表示する]いでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

サイト情報

SITE INFO