フィードバックと操作 · タップへの反応
ステッカーをめくる贴纸揭角
- 実物感
- 探索
- 誘い
ポインタを角に近づけるとめくれ、下の層が覗きます。ホバーの色変化より「めくれる」という情報を伝えます。
使いどころ
「カードの下にもう 1 枚ある」場面に向きます。クーポン、スクラッチ、会員コード、キャンペーンの帯などです。実際には開けない飾りのカードには使わないでください。「めくれる」と約束して開かないのは嘘になります。また 4 つの角すべてをめくれるようにしないでください。1 つで十分です。多いと解けない謎になります。
パラメータ
clip-path: slant 6→110px · transform: curl scale 0.35→1.1 · lift 90ms ease-out / fall 220ms ease-in
レシピ
ステッカーをめくる → slant 6 → 110px @ 90ms ease-outステッカーをめくる → scale 0.35 → 1.1 @ 90ms
AI に渡す一文
ステッカーの角めくりを作ってください。右下の角は、ポインタが近づくとめくれます。判定はホバーの当たり判定ではなく「ポインタから右下の角までの距離」にします。約 134px 以内でめくれ始め、近いほど大きくめくれます（0 から 1 を斜辺 6px から 110px に対応）。ポインタがカードの外にあっても反応します。clip-path の polygon で上層を右上から左下への斜めに沿って切り、下の内容を見せます。さらに三角形のめくれた部分を重ね、めくれ量に合わせて不透明度・拡大・わずかな回転を変え、左上への影を付けます。めくるのは 90ms の一次遅れ（主動作）、戻るのは 220ms（余勢）です。逆にすると嘘に見えます。