遊べるUI

遊べるUIに分類されるWeb表現技法11件。展開する検索、コピー成功、モーフィング・メニュー、はじけるハートなど。ライブデモとコピーできるコード付き。

丸い検索アイコンがクリックで横長バーへ弾性展開し、入力欄がスライドイン。もう一度押すかフォーカスを外すと丸に戻ります。ヘッダーの検索UIに。

コードをコピーすると「Copied!」の吹き出しがポンと弾んで現れチェックマークに切り替わり、数秒でふわっと消えるコピーボタン。

≡アイコンが弾性変形して×になり、メニュー項目が下から時間差でポップ表示されるハンバーガーメニュー。モバイルナビの開閉に使えます。

クリックのたびにハートが弾性スケールで弾み、ハートや粒が放射状に飛び散ってフェードするいいねボタン。連打しても崩れません。

クリックでチェックマークが跳ねながら描かれ、ボックスが弾性スケールし背景色がふわっと波及するチェックボックス。同意フォームなどに使えます。

クリックした位置に向かって押しつぶされ、ゼリーのようにぷるんと弾性で揺れ戻るボタン。押す場所によって歪む向きが変わり、連打しても弾みが破綻しません。

タブを切り替えると下線が液体のように伸び縮みしながらスライド移動し、クリックした地点からインクの波紋が広がるタブUI。ヘッダーの表示切替に使えます。

ボタンを長押しかクリックすると絵文字パレットが弧を描いてポップアップし、選んだ絵文字が跳ねて確定・カウントされるリアクションボタン。

クリックすると太陽と月が弧を描いて移動し、空の背景色が昼と夜のあいだをなめらかに遷移するトグル。雲の漂いや星の瞬きも添えました。

ドラッグするとノブが動かした方向へ弾性で伸び、現在値のバブルが追従表示されるスライダー。指を離すとぷるんと弾んで元の形に戻ります。

ノブが移動する瞬間、SVGフィルターで液体のようにトラックとつながって伸び縮みするトグルスイッチ。設定画面のON/OFF切替に使えます。