CSSはどんどん進化している！マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning

サイト構築 -CSS

Post on:2024年5月22日

sponsors

ロゴやアイコンを素早く形にしよう！ここまで進化したIllustratorの生成AI機能

ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。

これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。

Anchor Magnet Slide Menu

実際の動作は、デモページでお楽しみください。
右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。

※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。

See the Pen
Anchor Magnet Slide Menu by coliss (@coliss)
on CodePen.

レスポンシブにも対応しており、幅が狭い場合でも同様に機能します。

Anchor Magnet Slide Menu: 幅を狭くして表示

HTMLは、シンプルです。

    <nav data-magnetic>
      <ul>
        <li><a href="#home" id="home">Home</a></li>
        <li><a href="#links" id="links">Links</a></li>
        <li><a href="#rates" id="rates">Rates</a></li>
        <li><a href="#speaking" id="speaking">Speaking</a></li>
        <li><a href="#ai" id="ai">AI</a></li>
        <li><a href="https://twitter.com/intent/follow?screen_name=jh3yy" id="follow" target="_blank" rel="noreferrer noopener">Follow</a></li>
      </ul>
    </nav>

<ul>

<li><a href="#links" id="links">Links</a></li>

<li><a href="#rates" id="rates">Rates</a></li>

<li><a href="#speaking" id="speaking">Speaking</a></li>

<li><a href="https://twitter.com/intent/follow?screen_name=jh3yy" id="follow" target="_blank" rel="noreferrer noopener">Follow</a></li>

</ul>

</nav>

実装のポイントとなるのは、Chrome 125でサポートされた新機能CSS Anchor Positioningです。
参考: Chrome 125で新しく追加された4つのCSSの機能

この機能を使用すると、今まではJavaScriptを使用しないと取得できませんでしたが、CSSだけで絶対位置に配置された要素をページ上の1つ以上の要素（アンカー）に結びつけることができるようになりました。

ホバーした際に表示されるエフェクトがマグネットのようにくっつくのは、下記のCSSで実装されています。

li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; }
ul::before {
  left: anchor(--a left);
  width: anchor-size(--a width);
}

li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; }

ul::before {

left: anchor(--a left);

width: anchor-size(--a width);

}

2024年5月現在、CSS Anchor PositioningのサポートブラウザはChrome 125+です。デモでは非サポートブラウザ用にポリフィルが使用されています。

元ネタは、下記ポストより。

Update... All you need is this for a CSS-only magnetic link effect

li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; }
ul::before {
left: anchor(--a left);
width: anchor-size(--a width);
}

Create an anchor on hover, makes sense! ‍♂️

h/t @yassi_lah for the push https://t.co/chOHq6NG0T pic.twitter.com/6zLgUBLSpT

— jhey ▲ (@jh3yy) May 19, 2024