JavaScript

ScrollMagic.jsで実現！パララックスとスクロールアニメーションの組み合わせ技術解説

  /

ScrollMagic.jsを使ったウェブページでの魅力的なパララックス効果とスクロールアニメーションの導入方法について、実践的なガイドを提供します。
このテクノロジーは、訪問者にインタラクティブな体験を提供することで、ウェブサイトのエンゲージメントを高めることができます。初心者でもステップバイステップで理解しやすく、経験豊富な開発者にも役立つ内容を心がけています。

Contents

ScrollMagic.jsとは？

ScrollMagic.jsは、ウェブサイトにおけるスクロール操作をトリガーとしたインタラクティブなアニメーションを簡単に実装することができる強力なJavaScriptライブラリです。このライブラリを使うことで、ページ内要素の動きをスクロール位置に応じて制御することが可能になります。特に、パララックス効果の実現には非常に有効です。

環境設定

ScrollMagic.jsを利用する前に、いくつかの必要なファイルをプロジェクトに含める必要があります。これには以下が含まれます。

  • jQuery
  • GreenSock Animation Platform (GSAP)
  • ScrollMagic.js本体
  • ScrollMagicのGSAPプラグイン

　
これらのライブラリを利用することで、複雑なアニメーションもスムーズに実装可能です。

CSSの基本設定

ScrollMagicを使用する際、アニメーション対象の要素に適切なスタイルを適用することが重要です。
normalize.cssファイルを読み込みます。パララックスとスクロールアニメーションエリア（.box1）のCSS記述です。
以下に、基本的なCSS設定を示します。

<link rel="stylesheet" href="normalize.css" type="text/css">
<style>
body {
  padding: 0;
  height: 2000px;
  width: 2200px;
}
h1{
  text-align: left;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 50px;
}
.box1 {
  display: inline-block;
  position: relative;
  border-radius: 8px;
  border: 0px solid white;
  text-align: center;
  vertical-align: middle;
  padding: 0 5px;
  min-width: 100px;
  height: 100px;
  margin: 0 auto 0 -60px;
  background-color: #8ED2DD;
  left: 50vw;
  top: 200px;
}
.box1 p{
  margin: 20px 15px 5px 15px;
  font-size: 13px;
  font-weight: lighter;
  color: white;
}
</style>

HTMLの記述

パララックスとスクロールアニメーションエリア（class=”box1″）を用意します。

<h1>ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示します。<br>下または右にスクロールしてみてください。</h1>

<section id="multiDirect">
<div id="animate" class="box1">
  <p>
    下にスクロールで拡大<br>
    右にスクロールで回転
  </p>
</div>
</section>

JavaScriptでScrollMagicのコントローラとシーンを設定述

jquery.min.js（v3.3系）、gsap.min.js、ScrollMagic.js、animation.gsap.jsファイルを読み込みます。ScrollMagic.Controller()を記述します。ScrollMagic.js以外のjsプラグインも読み込んでるので以下の記述でanimationやrotateを追加できます。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gsap.min.js"></script>
<script type="text/javascript" src="ScrollMagic.js"></script>
<script type="text/javascript" src="animation.gsap.js"></script>

<script>
$(function () {
    // init controller
    var controller = new ScrollMagic.Controller();

    // build tween
    var tween = TweenMax.to("#animate", 0.5, {scale: 3, ease: Linear.easeNone});

    // build scene
    var scene = new ScrollMagic.Scene({triggerElement: "#multiDirect", duration: 400, offset: 250})
  .setTween(tween)
  .setPin("#animate")
  .addIndicators({name: "resize"}) // add indicators (requires plugin)
  .addTo(controller);

    // init controller horizontal
    var controller_h = new ScrollMagic.Controller({vertical: false});

    // build tween horizontal
    var tween_h = TweenMax.to("#animate", 0.5, {rotation: 360, ease: Linear.easeNone});

    // build scene
    var scene_h = new ScrollMagic.Scene({duration: 700})
  .setTween(tween_h)
  .setPin("#animate")
  .addIndicators({name: "rotate"}) // add indicators (requires plugin)
  .addTo(controller_h);
});
</script>

ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションデモページ

実際の効果を確認するために、以下のリンクからデモページにアクセスしてみてください。
ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションデモページ

ソース元：ScrollMagic Demo

ScrollMagic.jsのさらなる情報とサンプルは、公式サイトで提供されています。
ScrollMagic Demo

まとめ

ScrollMagic.jsを使用することで、ウェブページに革新的なインタラクティブ要素を簡単に追加することができます。この記事が、基本的な設定から具体的な実装方法まで、皆さんのプロジェクトに役立つ情報を提供することを願っています。次のステップとして、自分のプロジェクトでこの強力なライブラリを活用してみましょう。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

パララックス ScrollMagic.js スクロールアニメーション
関連記事