CSS Anchor Positioning APIを使用したタブUIのサンプル集です。各サンプルでは、アンカー要素に基づいて要素を配置する機能を活用しています。
基本的なアンカーポジショニングを使用したシンプルなタブUIのサンプルです。
カスタムイージング関数を使用した、より完成度の高いタブUIのサンプルです。
スクロール駆動アニメーション(Scroll-driven Animations)とアンカーポジショニングを組み合わせたタブUIのサンプルです。Vue.jsを使用しています。
:target-current 疑似クラスとアンカーポジショニングを組み合わせたタブUIのサンプルです。スクロール位置に応じてタブの背景が自動的に移動します。Vue.jsを使用しています。