CSS Only Diorama

奥行きは、
計算しなくてよい。

スクロールを監視している処理はここに1つも無い。層ごとに Z 方向へ押し下げて、 その分だけ拡大し直しているだけ。遠くのものが遅れて動くのは、遠近法がそう振る舞うから。

使っているもの

  • perspectivetranslateZ() による層の分離
  • :has() で読むチェックボックス1つぶんの状態
  • 色は2組の CSS 変数。切り替えは変数の差し替えだけ

JavaScript を持たないぶん、描画の開始が早く、壊れる箇所も少ない。 下部のナビだけはギャラリー共通の部品なので、そこには script がある。