スクロールに応じて文字や背景画像が動かせる「ScrollMagic / TweenMax」の備忘録ランディングページやプロモーションサイトでよく使われている動きのあるページを制作した時の事を忘れないように備忘録です。よく見かけるスクロールに応じて文字や背景画像が動くというやつ。 appleのiMac Proの紹介ページのようなイメージです。 https://www.apple.com/jp/imac-pro/ ここまで長いページを組むと頭痛くなりそうですが、よく見ると中盤以降は同じ動き。ただ最初のiMacがこちらを向く3Dは良く分かりませんw。今回はここまでではなく汎用性のある文字が浮き出てくる感じやコンテンツブロックが次々に出てくる感じとメニューバーが上部で追従するものを書いておきます。 スクリプトは素人なので、後々分かりやすいようにリスト化せず書きます。 今回利用するのは、「ScrollMagic」と「TweenMax」です。とても使いやすくjs苦手なデザイナーでも簡単にフロントエ
