3Dモデルとモーションタイポグラフィのスクロール駆動アニメーション

note

3Dモデルとモーションタイポグラフィがスクロールに連動してダイナミックな動きを見せます。テキストと3Dモデルという異なる要素がそれぞれ独自に動きながらもスクロール動作と同期する、つい動かしてみたくなるアニメーションです。

スクロールの表示領域に合わせたcanvas要素に平行投影のカメラを使って、正面から3Dモデルを表示させるように描画し、スクロール量の値を元に3Dモデルを回転、移動、拡大縮小させます。また、canvas要素外ではアニメーション対象のテキスト要素を配置し、スクロールハイジャックによるレイアウトを調整します。動きを強調して見せるにはスクロール量も必要となるため、その点も考慮してスクロール制御領域を確保します。より自然な動きに見せるためには、スクロールに連動する動きに対して少しの遅延を設けることがポイントです。
※3Dモデルはフリー素材を使用しています

スクロール動作とアニメーションが同期することはコンテンツへの没入感を高める効果が期待できますが、3Dモデルという立体的な要素を扱うことで、より印象に残るビジュアルになります。さらにテキスト要素が加わることで、メッセージ性も高めることができるため、広告やブランディングサイトなどとの相性も良いでしょう。

【使用ライブラリ】 Three.js / GSAP:ScrollTrigger