Slide Panel Transition

DEMO

CODE

<div class="demo-stage spt-stage"><div class="spt-tabs"><button class="spt-tab active" data-i="0" type="button">HOME</button><button class="spt-tab" data-i="1" type="button">WORK</button><button class="spt-tab" data-i="2" type="button">ABOUT</button></div><div class="spt-window"><div class="spt-track"><div class="spt-panel">HOME</div><div class="spt-panel">WORK</div><div class="spt-panel">ABOUT</div></div></div></div>

.spt-stage { display:flex; flex-direction:column; align-items:center; gap:1.5rem; padding:2.5rem; background:#0F0F12; }
.spt-tabs { display:flex; gap:.5rem; }
.spt-tab { background:transparent; border:1px solid rgba(255,255,255,.2); color:#9A9A9A; font-family:'Oswald',sans-serif; letter-spacing:.15em; font-size:.72rem; padding:.5rem 1.1rem; cursor:pointer; border-radius:4px; transition:all .25s; }
.spt-tab.active { background:#E91B89; border-color:#E91B89; color:#fff; }
.spt-window { width:min(360px,82%); overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.08); }
.spt-track { display:flex; width:300%; transition:transform .5s cubic-bezier(.7,0,.2,1); }
.spt-panel { width:33.3333%; height:160px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Oswald',sans-serif; font-size:2rem; letter-spacing:.1em; background:#1A1A1A; }
.spt-panel:nth-child(2) { background:#17171b; }
.spt-panel:nth-child(3) { background:#141417; }

(function(){
  var track = document.querySelector('.spt-track');
  var tabs = document.querySelectorAll('.spt-tab');
  if(!track) return;
  tabs.forEach(function(tab){
    tab.addEventListener('click', function(){
      var i = parseInt(tab.dataset.i, 10);
      track.style.transform = 'translateX(-' + (i * 33.3333) + '%)';
      tabs.forEach(function(t){ t.classList.remove('active'); });
      tab.classList.add('active');
    });
  });
})();

AI PROMPT

タブをクリックするとパネルが横スライドで切り替わるトランジションを作って。横長トラック（.track, width:300%, display:flex）の中に3枚のパネル（各 width:33.3333%）を並べ、外側 .window は overflow:hidden。タブのclickで track.style.transform='translateX(-' + index*33.3333 + '%)' を設定し、.trackに transition:transform .5s cubic-bezier(.7,0,.2,1) を付けると滑らかにスライドする。アクティブタブにactiveクラスをトグル。タブUI・ステップフォーム・オンボーディングの画面遷移に。

BOOKS · PR · AMAZON

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

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

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