ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示する方法｜DAD UNION

ScrollMagic.jsを使ってパララックスとページスクロールと連動したアニメーションを表示する方法をご紹介します。

Contents

ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示するCSS記述
ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示するHTML記述
ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示するJavaScriptの記述
ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションデモページ
ソース元：ScrollMagic Demo

ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示するCSS記述

※normalize.cssファイルを読み込みます。パララックスとスクロールアニメーションエリア（.box1）の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>

ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示するHTML記述

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

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

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

ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示するJavaScriptの記述

※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>