シェアアイコンがバウンスして登場
記事末尾のシェアアイコンが、下から弾むように一つずつ現れる演出です。各アイコンは初期状態で translateY(40px) と opacity:0 によって下に沈め半透明にしておき、 @keyframes で元の位置と不透明へ戻します。
解説
記事末尾のシェアアイコンが、下から弾むように一つずつ現れる演出です。各アイコンは初期状態で translateY(40px) と opacity:0 によって下に沈め半透明にしておき、@keyframes で元の位置と不透明へ戻します。イージングに反発を含む cubic-bezier を使い、終点を少し行き過ぎてから戻る「ぽよん」とした着地感を出しています。各アイコンの animation-delay を 0.1 秒ずつずらすことで、左から順に弾むテンポが生まれます。
使う場面
記事下部の SNS シェア欄、フッターの行動喚起、フォーム送信後の完了画面など、読み終わった読者へ次の一歩を軽快に促したい箇所に合います。アイコンに :hover で拡大と微回転を添えてあり、触れたくなる手応えも備えています。
- 登場順：各要素の
animation-delayを増減すると、テンポや弾む間隔を調整できます。 - 弾み具合：
cubic-bezier末尾の値を大きくすると跳ね返りが強調されます。 - 配慮：読み込みで一度だけ動くため軽量。スクロール到達で出したい場合は
IntersectionObserverでクラス付与に変えると自然です。
使用例・適したシーン
- 購入完了・サブスク成約画面
- ゲーム要素のあるサイト
- イベント告知
よくある質問
アイコンが弾むタイミングをずらすには
各アイコンに付いている animation-delay の値を変えます。0.1 秒刻みを広げると間隔が空いてゆっくり順に、狭めるとほぼ同時に弾みます。
画面に入ったときに弾ませたいです
今の実装は表示と同時に再生されます。スクロールで到達したら弾ませたい場合は IntersectionObserver で要素が見えた瞬間にアニメ用クラスを付け、そのクラスに keyframes を割り当てます。