ScrollMagic.jsを使ってパララックスとページスクロールと連動したアニメーションを表示する方法をご紹介します。
Contents
ディスプレイ広告
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>
ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションデモページ
ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションデモページ
ソース元:ScrollMagic Demo
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。