Coding Lab
画像クリックでアニメーション再生
Velocity(速度)連動テキストと3D空間パレード
- 実装ポイント Focus
- ユーザーのスクロール量だけでなく「スクロール速度(Velocity)」に連動して挙動が変化する、没入感の高いインタラクションを実装。
画面を勢いよくスクロールすると、背景のタイポグラフィがその勢いに呼応して加速し、指を止めると心地よい慣性を残しながらスーッと元の速度に減速します。
また、テキストがフェードアウトする動きにリレーさせる形で、画像群が手前へ迫ってくる3Dアニメーションを展開。
CSSのperspectiveによる仮想3D空間を用いることで、まるで連が目の前に迫ってくるようなダイナミックな視覚体験を提供しています。 - 挑戦 Challenge
- スクロール連動によるアニメーションの暴走を防ぐため、onUpdate内で速度を取得してtimeScale(再生速度)を動的に変更。
さらにoverwrite: trueを用いた瞬時の「加速」と、delayを持たせた「減速(ブレーキ)」を並行して走らせることで、デバイスを問わずユーザーの指に吸い付くような自然な操作感を追求しています。 - 使用技術 Animation
- ・HTML5
・CSS3 (perspective / clip-path)
・JavaScript (GSAP / ScrollTrigger) - 詳細 Details