Curtain Reveal

DEMO

CODE

<div class="demo-stage cur-stage"><div class="cur-box"><div class="cur-content">REVEALED ✨</div><div class="cur-panel cur-left"></div><div class="cur-panel cur-right"></div></div><button class="cur-btn" type="button">REVEAL</button></div>

.cur-stage { display:flex; flex-direction:column; align-items:center; gap:1.4rem; padding:2.5rem; background:#0F0F12; }
.cur-box { position:relative; width:min(320px,82%); height:160px; border-radius:14px; overflow:hidden; }
.cur-content { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#1A1A1A; color:#E91B89; font-family:'Oswald',sans-serif; font-size:1.6rem; letter-spacing:.1em; }
.cur-panel { position:absolute; top:0; height:100%; width:50%; background:linear-gradient(135deg,#7b37a8,#e91b89); transition:transform .7s cubic-bezier(.7,0,.2,1); }
.cur-left { left:0; }
.cur-right { right:0; }
.cur-box.open .cur-left { transform:translateX(-100%); }
.cur-box.open .cur-right { transform:translateX(100%); }
.cur-btn { background:transparent; border:1px solid #E91B89; color:#E91B89; font-family:'Oswald',sans-serif; letter-spacing:.2em; font-size:.72rem; padding:.5rem 1.2rem; cursor:pointer; border-radius:4px; transition:all .2s; }
.cur-btn:hover { background:#E91B89; color:#fff; }

(function(){
  var box = document.querySelector('.cur-box'), btn = document.querySelector('.cur-btn');
  if(!box || !btn) return;
  btn.addEventListener('click', function(){ box.classList.toggle('open'); });
})();

AI PROMPT

左右のパネルが開いて中身が現れるカーテン演出を作って。中身の上に幅50%のパネルを左右2枚重ね（cur-left:left0 / cur-right:right0）、transition:transform .7s。openクラスで左パネルは translateX(-100%)、右は translateX(100%) に動かして開く。価格・特典・回答の「ジャジャーン」表示に。

BOOKS · PR · AMAZON

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

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

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