DEMO
CODE
<div class="demo-stage dr-stage"><button class="dr-open" id="drOpen">OPEN DRAWER</button><div class="dr-mask" id="drMask"></div><div class="dr-panel" id="drPanel"><h3>MENU</h3><a href="#">エフェクト一覧</a><a href="#">ガイド記事</a><a href="#">よくある質問</a><a href="#">このサイトについて</a></div></div>
.dr-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.dr-open { padding:1rem 2.5rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; cursor:pointer; border-radius:6px; }
.dr-mask { position:absolute; inset:0; background:rgba(26,26,26,.5); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:10; }
.dr-mask.show { opacity:1; pointer-events:auto; }
.dr-panel { position:absolute; top:0; right:0; width:240px; height:100%; background:#fff; box-shadow:-8px 0 32px rgba(0,0,0,.16); transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); z-index:11; padding:2rem 1.6rem; }
.dr-panel.show { transform:translateX(0); }
.dr-panel h3 { font-family:'Oswald',sans-serif; font-size:1.2rem; letter-spacing:.15em; color:#1A1A1A; margin-bottom:1.3rem; }
.dr-panel a { display:block; padding:.75rem 0; color:#5A5A5A; text-decoration:none; font-size:.9rem; border-bottom:1px solid #F0F0F0; transition:color .2s ease; }
.dr-panel a:hover { color:#E91B89; }
const drMask = document.getElementById('drMask');
const drPanel = document.getElementById('drPanel');
function drToggle(state){
drMask.classList.toggle('show', state);
drPanel.classList.toggle('show', state);
}
document.getElementById('drOpen').addEventListener('click', function(){ drToggle(true); });
drMask.addEventListener('click', function(){ drToggle(false); });
AI PROMPT
右からスライドインするドロワーメニューを作って。パネルはposition:absolute top:0 right:0、初期transform:translateX(100%)、showクラスでtranslateX(0)へ.4s cubic-bezier。背面マスクはinset:0の半透明、opacityでフェード。開くボタンで両方show、マスククリックで閉じる。box-shadowで浮遊感。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
画面の右端からスライドして現れるドロワーメニュー。ナビゲーション・フィルター・カート表示に。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
ダイアログ・通知・サイドドロワー・確認ポップアップなど、前面に出すUIの開閉に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。