スクロールに応じて文字や背景画像が動かせる「ScrollMagic / TweenMax」の備忘録
ランディングページやプロモーションサイトでよく使われている動きのあるページを制作した時の事を忘れないように備忘録です。よく見かけるスクロールに応じて文字や背景画像が動くというやつ。 appleのiMac Proの紹介ページのようなイメージです。 https://www.apple.com/jp/imac-pro/ ここまで長いページを組むと頭痛くなりそうですが、よく見ると中盤以降は同じ動き。ただ最初のiMacがこちらを向く3Dは良く分かりませんw。今回はここまでではなく汎用性のある文字が浮き出てくる感じやコンテンツブロックが次々に出てくる感じとメニューバーが上部で追従するものを書いておきます。 スクリプトは素人なので、後々分かりやすいようにリスト化せず書きます。 今回利用するのは、「ScrollMagic」と「TweenMax」です。とても使いやすくjs苦手なデザイナーでも簡単にフロントエ
スクロール連動のライブラリ『ScrollMagic』の基本的な使い方 - Qiita
ScrollMagicとは ScrollMagicはスクロール連動のためのJavaScriptライブラリ。本記事執筆時点のバージョンは2.0.5。 以下のようなことができます。 スクロール位置をトリガーにして要素のアニメーションを行う スクロールバーの動きに合わせて要素を変化させる 要素を特定のスクロール位置に留める（pin） スクロール位置に合わせて要素のCSSクラスを入れ替える Examplesで利用例とソースコードを確認できます。 基本的な利用方法 スクリプト読み込み CDNから読み込む場合。 debug.addIndicators.min.jsはデバッグ用。 <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnj
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
