CSS Anchor Positioning APIと関連仕様を活用したUIサンプル集です。タブUIやツールチップの実装パターンを確認できます。
基本的なアンカーポジショニングを使用したシンプルなタブUIのサンプルです。
カスタムイージング関数を使用した、より完成度の高いタブUIのサンプルです。
スクロール駆動アニメーション(Scroll-driven Animations)とアンカーポジショニングを組み合わせたタブUIのサンプルです。Vue.jsを使用しています。
:target-current 疑似クラスとアンカーポジショニングを組み合わせたタブUIのサンプルです。スクロール位置に応じてタブの背景が自動的に移動します。Vue.jsを使用しています。
interestfor属性とpopoverを使った最小構成のツールチップサンプルです。JavaScriptなしで動作します。
interestfor属性・Popover API・Anchor Positioning APIを組み合わせた、記事プレビュー付きツールチップのサンプルです。