磁力ホバー＆弾性クリックボタンをAIで作る方法【プロンプト作例】
プロンプト
CSS transformとJavaScriptを使用して、磁力ホバー効果と弾性クリックフィードバックを持つボタンを作成します。ボタンはカーソルが近づくと引き寄せられ、クリックすると弾性アニメーションで跳ね返ります。
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このインタラクティブボタンは、磁力ホバー効果と弾性クリックフィードバックを組み合わせ、楽しいマイクロインタラクションを実現しています。カーソルが近づくとボタンが引き寄せられ、遊び心のある磁力効果を生み出します。クリック時には、満足感のある弾性バウンスアニメーションでユーザーに明確なフィードバックを提供します。
磁力効果はカーソルの近接度に基づいて計算されます。カーソルがボタンに近づくほど引力が強くなり、直感的で魅力的な物理的なインタラクションを実現します。
弾性クリックアニメーションは、カスタムのcubic-bezierタイミング関数を使用して現実世界の弾性をシミュレートし、ボタンの応答性と触覚的な感触を高めています。微細な波紋効果が視覚的フィードバックを強化し、クリックカウンターはインタラクションの実用的な応用例を示しています。
この実装は最適なパフォーマンスのために純粋なJavaScriptとCSS transformを使用し、translate3dによるハードウェアアクセラレーションでスムーズなアニメーションを実現しています。デザインはモダンなグラデーションバックグラウンドと適切なシャドウ、トランジションを特徴とし、洗練されたプロフェッショナルな外観を作り出しています。
プロンプトの解説
このプロンプトは、CSSのtransformプロパティとJavaScriptのマウスイベントを組み合わせ、インタラクティブなUIボタンを実装するコードを生成させる作例です。カーソルの座標を検知してボタンを引き寄せる磁力効果と、クリック時に弾性(spring)アニメーションで跳ね返るフィードバックという、二段階の動きを一つのプロンプトで指示している点が特徴です。
フロントエンド開発のプロトタイプ制作やポートフォリオサイトの演出など、ユーザー体験を視覚的に高めたい場面で活用できます。生成コードの再現精度を上げるには、弾性の強さや引き寄せ範囲をピクセル値で具体的に追記するとより意図に沿った出力が得られます。ChatGPTやClaude等のコード生成が得意なモデルに適しています。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選