CSS Anchor Positioning サンプル集

CSS Anchor Positioning APIを使用したタブUIのサンプル集です。各サンプルでは、アンカー要素に基づいて要素を配置する機能を活用しています。

シンプルなタブUI

基本的なアンカーポジショニングを使用したシンプルなタブUIのサンプルです。

アンカーポジショニング

カスタムイージング付きタブUI

カスタムイージング関数を使用した、より完成度の高いタブUIのサンプルです。

アニメーション カスタムイージング アンカーポジショニング

スクロール駆動アニメーション付きタブUI

スクロール駆動アニメーション(Scroll-driven Animations)とアンカーポジショニングを組み合わせたタブUIのサンプルです。Vue.jsを使用しています。

スクロール駆動 Vue.js アンカーポジショニング

:target-current を使ったタブUI

:target-current 疑似クラスとアンカーポジショニングを組み合わせたタブUIのサンプルです。スクロール位置に応じてタブの背景が自動的に移動します。Vue.jsを使用しています。

:target-current scroll-target-group Vue.js アンカーポジショニング