ランディングページやプロモーションサイトでよく使われている動きのあるページを制作した時の事を忘れないように備忘録です。よく見かけるスクロールに応じて文字や背景画像が動くというやつ。
appleのiMac Proの紹介ページのようなイメージです。
https://www.apple.com/jp/imac-pro/
ここまで長いページを組むと頭痛くなりそうですが、よく見ると中盤以降は同じ動き。ただ最初のiMacがこちらを向く3Dは良く分かりませんw。今回はここまでではなく汎用性のある文字が浮き出てくる感じやコンテンツブロックが次々に出てくる感じとメニューバーが上部で追従するものを書いておきます。
スクリプトは素人なので、後々分かりやすいようにリスト化せず書きます。
今回利用するのは、「ScrollMagic」と「TweenMax」です。とても使いやすくjs苦手なデザイナーでも簡単にフロントエンジニアのような事が出来ます。
またこれの利点は、静的にコーディングし終わった後から動きのあるページに出来ることだと思います。よくある例はクライアントから最初は静的なLPで依頼をされたが、後でもっとリッチにとか言われる事も多々あります。そういう時にサクッとこれを利用するとリッチコンテンツの出来上がりですね。
「ScrollMagic」「TweenMax」
「ScrollMagic」は、スクロールに応じてイベントを起こすスクリプトです。例えばある場所までスクロールしてきたら何かをさせるということが可能です。
「TweenMax」は、アニメーションさせることが出来ます。要素を右から左へ移動させたり、ゆっくり出現させたり。
この2つを組み合わせると「ある場所まで、スクロールしてきたら要素をフワッと出現させる」ということが出来ます。
「ScrollMagic」http://scrollmagic.io/
「TweenMax」https://greensock.com/docs/TweenMax
準備
まず利用できるように下記コードで読み込みます。debugのスクリプトは開発段階の確認で利用するので本番ではいりません。
下記はCDNで読み込んでいますが、公式サイトよりDLして読んでも勿論OK。
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> <script scr="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
動作設定
まず、全体を制御するコントローラーを作る。これは最初の1回で良い。
var controller = new ScrollMagic.Controller();
次にシーンを作って、条件を書き込んでいく。最後にコントローラーに渡す。
下記の場合、まずTweenMaxでアニメーションを設定し変数tweenに入れておく。
アニメーションは、fromTo()で初期値を指定しそのあと変化後を指定しています。
そしてScrollMagicで、スクロールしてきて.block1の位置（triggerElement,triggerHook）から200px過ぎた（offset）ら変数tweenのアニメーションをさせる（setTween）という条件になります。reverse: falseで1回のみになります。
var tween = TweenMax.fromTo(".block1", 2, {y:30, opacity:0 }, {ease: Power4.easeOut,y:0,opacity:1 });
var scene = new ScrollMagic.Scene({
triggerElement: ".block1",
triggerHook: "onEnter",
offset : 200,
reverse: false
})
.setTween(tween)
.addTo(controller);
これを1セットにして新しく別名でsceneやtweenを増やしていけば文法は長くなりますが、私のようなノンプログラマーでも分かりやすい。
ScrollMagicとTweenMaxは、公式サイトにたくさんの例がありますので、複雑なアニメーションやスクロールに応じた動作が可能です。
私が良く使うかなと思うのは、上記をベースに右から文字がとかコンテンツボックスを順々に出現とかですかね。またパララックスやコンテンツ要素をある位置から固定するということも。
DEMOページ
以下備忘録としてDEMOを作ってみました。
DEMOの静的HTMLは、http://stitches.hyperyolo.com のジェネレーターで用意し、そこにScrollMagicとTweenMaxで動きをつけています。若干追加CSS（z-indexやpadding）してますが、難しいことはしていません。ほぼジェネレーターで生成したhtmlをそのまま利用しています。
動きとしては、よく利用する動きのまとめです。設定スクリプトも個別毎に設定しています。
・文字をフワッと出現
・途中のメニューバーを最上部に固定
・コンテンツを順々に出現
・パララックス背景
・ボタンの背景色を変化