Elastic Tab Indicator

DEMO

<div class="demo-stage eti-stage">
  <div class="eti-tabs" id="eti-tabs" role="tablist" aria-label="Elastic Tab Indicator デモ">
    <button class="eti-tab is-active" type="button" role="tab" aria-selected="true">OVERVIEW</button>
    <button class="eti-tab" type="button" role="tab" aria-selected="false">FEATURES</button>
    <button class="eti-tab" type="button" role="tab" aria-selected="false">PRICING</button>
    <button class="eti-tab" type="button" role="tab" aria-selected="false">FAQ</button>
    <span class="eti-ind" aria-hidden="true"></span>
  </div>
  <p class="eti-note">タブを切り替えるとバーが伸びて追従します</p>
</div>

.eti-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem; padding:3rem 1rem; background:#0B0B10; min-height:280px; }
.eti-tabs {
  position:relative; display:flex; gap:.2rem; flex-wrap:wrap; justify-content:center;
  padding:.4rem; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.eti-tab {
  position:relative; z-index:1; padding:.6rem 1.2rem; border:none; border-radius:999px;
  background:transparent; color:#8A8A95; cursor:pointer;
  font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:.16em;
  transition: color .28s ease;
}
.eti-tab.is-active { color:#fff; }
.eti-tab:focus-visible { outline:2px solid #E91B89; outline-offset:2px; }
.eti-ind {
  position:absolute; top:.4rem; left:0; height:calc(100% - .8rem);
  border-radius:999px; background:#E91B89;
  transform-origin:center;
  transition: transform .42s cubic-bezier(.34,1.4,.42,1), width .42s cubic-bezier(.34,1.4,.42,1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .eti-ind { transition-duration:.01ms; }
}

(function(){
  var tabs = document.getElementById('eti-tabs');
  if (!tabs) return;
  var ind = tabs.querySelector('.eti-ind');
  var items = Array.prototype.slice.call(tabs.querySelectorAll('.eti-tab'));
  var stretchTimer = null;

  function place(el, stretch){
    var pr = tabs.getBoundingClientRect();
    var r = el.getBoundingClientRect();
    ind.style.width = r.width + 'px';
    ind.style.transform = 'translateX(' + (r.left - pr.left) + 'px) scaleX(' + stretch + ')';
  }

  function select(el){
    items.forEach(function(t){
      var on = (t === el);
      t.classList.toggle('is-active', on);
      t.setAttribute('aria-selected', on ? 'true' : 'false');
    });
    place(el, 1.35);
    clearTimeout(stretchTimer);
    stretchTimer = setTimeout(function(){ place(el, 1); }, 190);
  }

  items.forEach(function(t){ t.addEventListener('click', function(){ select(t); }); });
  window.addEventListener('resize', function(){
    var active = tabs.querySelector('.eti-tab.is-active');
    if (active) place(active, 1);
  });
  var first = tabs.querySelector('.eti-tab.is-active') || items[0];
  if (first) { ind.style.transition = 'none'; place(first, 1); void ind.offsetWidth; ind.style.transition = ''; }
})();

AI PROMPT

タブを切り替えるとインジケーターが一度伸びてから縮んで着地する、弾性のあるタブUIを作って。インジケーターはタブ群の中に絶対配置し、選択されたタブの getBoundingClientRect() から幅と左端オフセットを取り、width と transform: translateX() で移動させる（left を直接動かすとレイアウトが再計算されて重い）。弾性の表現は2段階で作る。1) クリック直後に scaleX(1.35) を掛けた状態で移動させる。2) 190ms 後に scaleX(1) へ戻す。この「伸びてから戻る」だけで質量のある動きに見える。イージングは cubic-bezier(.34, 1.4, .42, 1) のようにオーバーシュートするものを選ぶ。初期表示ではトランジションを一時的に none にしてから配置し、強制リフローを挟んで戻す（そうしないと初期位置から飛んでくる）。リサイズ時にも再配置すること。role="tablist" / role="tab" / aria-selected を付け、:focus-visible のアウトラインは消さないこと。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

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

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

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