コードを書かなくても、こんな動きが作れる
↓ スクロールしてデモを体験 ↓
タイトルがパラパラッと降ってくる、定番の演出。
朝活、はじめました。
日本語をパラパラ、ワンテンポ遅れて英語をスッと。アパレルやカフェのサイト風。
挑戦は、何歳からでも。
CHALLENGE AT ANY AGE
ハッカー映画やゲームUIで見る、あの演出。
スタンバイ……
カードが1枚ずつ順番に。stagger(スタッガー)という機能。
同じ移動でも、緩急(イージング)でこんなに印象が変わる。
右へ→下へ→消える。タイムラインで「振り付け」する。
その位置まで来たらフワッと登場。小窓の中をスクロールしてみて。
↓ スクロール ↓
スクロール量と動きがリンク。戻すと巻き戻る。
↓ 進めると転がる/戻すと巻き戻る
スクロールしても、このセクションだけ画面に固定される。
固定+連動+振り付け。大手メーカーの製品ページ風の演出。
↓ この中をスクロール ↓
ロゴやイラストが、手描き風にスーッと引かれていく。(DrawSVG)
丸が星に、にゅるっと変形。(MorphSVG)
まっすぐじゃなく、曲線の軌道に沿って飛ぶ。(MotionPath)
カチッと切り替わらず、ぬるっと変形。一覧→詳細でよく使う。(Flip)
クリックするたび、大きさが切り替わります
マウスで掴んで動かせる。勢いよく離すと慣性で滑る。(Draggable)
↑ 箱を掴んで動かしてみて(投げると滑ります)
画面いっぱいで体験するやつ。別ページで開きます。