Bottom Sheet

DEMO

CODE

<div class="demo-stage bs-stage"><button class="bs-open" id="bsOpen">OPEN SHEET</button><div class="bs-mask" id="bsMask"></div><div class="bs-sheet" id="bsSheet"><div class="bs-handle"></div><h3>共有する</h3><p>下からせり上がるモバイル定番のボトムシートUI。リンクのコピーやSNS共有の選択肢提示に使えます。</p></div></div>

.bs-stage { display:flex; align-items:center; justify-content:center; padding:3rem; min-height:300px; }
.bs-open { padding:1rem 2.5rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; cursor:pointer; border-radius:6px; }
.bs-mask { position:absolute; inset:0; background:rgba(26,26,26,.5); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:10; }
.bs-mask.show { opacity:1; pointer-events:auto; }
.bs-sheet { position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:22px 22px 0 0; transform:translateY(100%); transition:transform .42s cubic-bezier(.34,1.3,.64,1); z-index:11; padding:1rem 1.6rem 2.2rem; }
.bs-sheet.show { transform:translateY(0); }
.bs-handle { width:46px; height:5px; background:#E5E5E5; border-radius:3px; margin:0 auto 1.3rem; }
.bs-sheet h3 { font-family:'Oswald',sans-serif; font-size:1.25rem; letter-spacing:.08em; color:#1A1A1A; margin-bottom:.6rem; }
.bs-sheet p { font-size:.85rem; color:#5A5A5A; line-height:1.7; }

const bsMask = document.getElementById('bsMask');
const bsSheet = document.getElementById('bsSheet');
function bsToggle(state){
  bsMask.classList.toggle('show', state);
  bsSheet.classList.toggle('show', state);
}
document.getElementById('bsOpen').addEventListener('click', function(){ bsToggle(true); });
bsMask.addEventListener('click', function(){ bsToggle(false); });

AI PROMPT

下からせり上がるボトムシートを作って。シートはposition:absolute left:0 right:0 bottom:0、border-radius上だけ丸く、初期transform:translateY(100%)、showでtranslateY(0)へ.42s cubic-bezier(.34,1.3,.64,1)で軽く弾ませる。上部にグレーのドラッグハンドル。背面マスクをフェード、マスククリックで閉じる。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。