- 担当範囲
- 静的コーディング / Wordpress構築
- 制作期間
- 5日
- 使用言語
- HTML / CSS（Sass） / JavaScript
- デザインツール
- Figma
- ポイント
Point 1 出現時に左上から文字色が変わる演出
- テキストを1文字ずつ “span” に分解し、通し番号を振ることで、左上から右下へ流れるような色変化を実現。
- “IntersectionObserver”を使い、セクションが表示領域に入った瞬間だけアニメーションを発火させ、不要な再実行を防止。
Point 2 リンククリックでカードを横スクロール移動
- href="#..." のリンクは通常だと縦に移動してしまうため、preventDefault() を使ってその動きを無効にし、横スクロール用の処理だけを実行している。
- クリックされたリンクに対応するカードの位置を取得し、カード一覧の表示位置と比べて必要な横移動量を計算し、scrollTo でなめらかにスクロールさせている。
Point 3 スクロールで左右の画像が奥に開く演出
- 左右の画像パネルをそれぞれ内側の端を軸 “transform-origin” にして “rotateY” させ、奥行きのある「扉が開く」動きを再現。
- セクションが表示領域に入ったタイミングでクラスを付与し、”transition” によって滑らかに開くアニメーションを実行。
全体イメージ
