ホバーすると大きくなる一覧

モーション種別: ドーン/ギュッ系
コンポーネント: 一覧
トリガー: ホバー
技術: JavaScript

概要

ホバー・フォーカスした要素が大きくなり、他の要素はそれに応じて小さくなる一覧です。

ホバーやフォーカスしている要素が一目でわかるアニメーションです。

サンプルではメニューのようにしていますが、画像を並べたギャラリーに使うっても洗練された雰囲気になると思います。

実装は、gridレイアウトを使っています。

JavaScriptでgrid-template-columnsを作り、frを使ってホバーやフォーカス時に要素の大きさの割合を変更しています。

コードサンプル

HTML

<ul class="c-sampleList">
  <li class="c-sampleList__item"><a href="#">ABOUT</a></li>
  <li class="c-sampleList__item"><a href="#">MENU</a></li>
  <li class="c-sampleList__item"><a href="#">BLOG</a></li>
  <li class="c-sampleList__item"><a href="#">CONTACT</a></li>
</ul>

CSS

.c-sampleList {
  display: grid;
  column-gap: 0.1em;
  width: 90%;
  list-style: none;
  transition: grid-template-columns 0.3s ease-in-out;
}
.c-sampleList .c-sampleList__item {
  padding: 0;
  height: 5em;
  font-size: 10px;
}
.c-sampleList .c-sampleList__item:before,
.c-sampleList .c-sampleList__item:after {
  content: none;
}
.c-sampleList__item a {
  display: block;
  padding-block: 0.2em;
  padding-inline: 0.5em;
  width: 100%;
  height: 100%;
  font-size: inherit;
  color: #f4f5f9;
  background-color: #08254f;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const sampleList = document.querySelector('.c-sampleList');
  if (!sampleList) return;

  const items = Array.from(sampleList.children); // li 一覧

  // activeIndex の列だけ 2fr、それ以外は 1fr
  const setCols = (activeIndex = null) => {
    const cols = items.map((_, i) => (i === activeIndex ? '2fr' : '1fr')).join(' ');
    sampleList.style.gridTemplateColumns = cols;
  };

  // 初期化（全部1fr）
  setCols();

  // 各 li 内の a に直接リスナーを付与
  items.forEach((li, idx) => {
    const link = li.querySelector('a');
    if (!link) return;

    // a にホバーしたとき拡大
    link.addEventListener('mouseenter', () => setCols(idx));
    // a から離れたとき元に戻す
    link.addEventListener('mouseleave', () => setCols());

    // キーボード操作（Tabでフォーカス移動）にも対応
    link.addEventListener('focus', () => setCols(idx));
    link.addEventListener('blur', () => setCols());
  });
});