うわあ、これって AI が一気に処理できるものなの？ Gemini 3 は、スクロールするとリッチなアニメーションが再生される、少し前にとても人気があったスクロールする物語の Web ページを生成するのに役立ちました。 5 秒まで待ってください。すると、驚くべきものが見えます。彼は 3D のように見える複雑なカード アニメーションを作成しました。 プロンプトワード👇
プロンプトワード: クリエイティブなインタラクションに長けたフロントエンド開発のエキスパートとして活躍してください。Appleの製品ページに似た「スクロールテリング」のウェブページデモを作成してください。 テクノロジー スタックの要件: ScrollTrigger プラグインと組み合わせて HTML、CSS、GSAP (GreenSock) を使用します。 相互作用ロジック: ページの高さは非常に高く（例：5000px）、固定された全画面ビューポート（ピン留めコンテナ）を作成する必要があります。ユーザーのスクロール操作はページを移動させるのではなく、アニメーションのタイムライン全体の再生を直接制御するプログレスバー（スクラブ：1）として機能する必要があります。 ビジュアルとアニメーションのワークフロー (次のタイムラインを順番に実装してください): オープニング：画面中央にはシンプルなスローガンのみが表示されます。スクロールすると、テキストが拡大され、徐々に消えていきます。 UI デモ: 次に、シミュレートされた「電話通知ポップアップ」と「メール リスト カード」がさまざまな方向から画面の中央にスムーズに飛んできます。 スタッキング効果: スクロールを続けると、散らばったカードが自動的にスナップされ、3D 変換によって積み重ねられます (スタッキング効果)。 クライマックス: 「すべて購読解除」ボタンが表示され、それをスクロールすると、積み重ねられたすべてのカードが瞬時に爆発/四方八方に飛び散ります (爆発効果)。 エンディング: 最終的なロゴが明らかになります。 スタイル要件: ミニマリズム、角の丸いカードデザイン、柔らかな影、そして非常に柔軟なアニメーションカーブ（Elastic/Spring）。実行可能な完全なコードファイルをご提供ください。