Zoom Blur Transition

DEMO

CODE

<div class="demo-stage zbt-stage"><div class="zbt-screen"><div class="zbt-panel">HOME</div></div><button class="zbt-btn" type="button">NEXT →</button></div>

.zbt-stage { display:flex; flex-direction:column; align-items:center; gap:1.4rem; padding:2.5rem; background:#0F0F12; }
.zbt-screen { width:min(320px,82%); height:160px; border-radius:14px; background:linear-gradient(135deg,#1A1A1A,#2a1830); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.zbt-panel { font-family:'Oswald',sans-serif; font-size:2rem; letter-spacing:.1em; color:#fff; }
.zbt-panel.anim { animation:zbt .5s ease; }
@keyframes zbt { 0% { opacity:0; transform:scale(1.5); filter:blur(12px); } 100% { opacity:1; transform:scale(1); filter:blur(0); } }
.zbt-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; }
.zbt-btn:hover { background:#E91B89; color:#fff; }

(function(){
  var labels = ['HOME','WORK','ABOUT','CONTACT'];
  var i = 0, panel = document.querySelector('.zbt-panel'), btn = document.querySelector('.zbt-btn');
  if(!panel || !btn) return;
  btn.addEventListener('click', function(){
    i = (i + 1) % labels.length;
    panel.textContent = labels[i];
    panel.classList.remove('anim'); void panel.offsetWidth; panel.classList.add('anim');
  });
})();

AI PROMPT

コンテンツがズーム＋ブラーで切り替わる映画的トランジションを作って。@keyframesで 0%:opacity0 + scale(1.5) + blur(12px) → 100%:opacity1 + scale(1) + blur(0)。切替時に textContent を変え、クラスを一度外して void el.offsetWidth（強制リフロー）で再適用するとアニメが毎回再生される。タブ・ステップ・ストーリーの場面転換に。

BOOKS · PR · AMAZON

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

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

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