| 実装のポイント | - ファーストビューの無限スクロール
ファーストビューでの表示パフォーマンスを考慮し、JavaScriptは使用せずCSSの @keyframes のみで軽量に実装しました。 - タブと連動したスライドショー
スワイパーを使用し、タブ切り替えとスライドを連動させています。 - スクロール連動の文字色変化アニメーション
SplitType でテキストを分割し、Intersection Observer で監視することで、一文字ずつハイライトされる演出を実装しました。スピードやタイミングを調整し、自然と読み進めたくなる動きにしました。 - 画像が扉のように開く閉アニメーション(PC)
CSSの perspectiveを活用し、3D的な奥行きを表現。スクロールに応じ、扉が開くようなアニメーションを実現しています。
|
|---|