「React×GSAPで作るケーキ屋さんWebページの動くアニメーションを公開！」

今回は、私が制作中のケーキ屋さん向けWebページの Header、背景、商品紹介部分に動きをつけたアニメーション をYouTubeショートで公開しました。

動画では次の3つのポイントを紹介しています：

Headerのアニメーション

ロゴが斜めから正面に回転しながらフェードイン

ナビリンクは小さく縮んだ状態から拡大

SNSアイコンは下からスライドして登場

背景の動き

Three.jsのシェーダーでグラデーションがゆっくり変化

クッキー型の3Dモデルが画面上から下に回転しながら降るパーティクル演出

MenuItemsのスクロールアニメーション

商品説明のテキストが左右からスライドイン

画像が画面外から滑り込む動き

スクロールに合わせた自然な表示でユーザーの目を引く

これらのアニメーションを組み合わせることで、Webページ全体に 華やかさと動き が加わり、ケーキ屋さんの魅力をより直感的に伝えられるようになります。

🔗 YouTubeショート動画はこちら ↓