AIで作るスクロール連動プログレスバー｜プロンプト作例コピペOK

このプロンプトは、Webページのスクロール位置に連動して動くプログレスバーをコード生成AIに作らせるための指示です。画面上部に固定されたバーがスクロール率に応じてリアルタイムで伸縮する動作を、HTML・CSS・JavaScriptの組み合わせで実装させることができます。

ブログ記事や長文コンテンツを持つサイトに組み込む際に有用で、読者が現在どの位置を読んでいるかを直感的に把握できます。プロンプトに配色やバーの高さなどの具体的な条件を追加することで、デザインの調整も合わせて指示できます。