通常、ページを遷移するときは画面の切り替わりがおこるため、 一瞬画面の切り替わりが生じます。
「View Transitions API」はページを遷移するときに、まるでスマホのアプリのようにシームレスに遷移してくれるCSSです。
これまでは、WebサイトではAJAXやJSフレームワークを使用したりと、簡単に実装できなかった表現方法ですが、View Transitions APIはシンプルなCSSだけで実現できてしまいます。
欠点は、ChromeとEdgeには対応していたもののSafariが対応していないことでした。これが、Safari バージョン18で対応となったため、ほぼ全ての人が「View Transitions API」によるシームレスな画面遷移が可能になったと言えます。 Safari バージョン18は2024年9月に出たばかりなので、クライアントワークで使うにはもう少し時間は必要ですが、バージョン18以下でもページは変わるのでサイト閲覧には問題ないありません。
https://hi-fn.com/test-code/View_Transitions_API_slide/index.html
A-frameには衝突判定がないため、外部ライブラリ「aframe-physics-system」を使うというのが主流のようです。しかしA-Frame v1.3.0以降で効かなくなったようで、残念ながら動かせませんでした。そこでほかの解決策を探ってみました。
VRというと、どうしても専用のヘッドマウントディスプレイやデバイスが必要でプログラムも高度なイメージがあり、気軽に挑戦できないと思ってしまいますが、Javascriptフレームワークの「A-Frame」をつかうとHTMLコーディングのような手軽さでVRコンテンツが作成できる優れものです。