CSSだけで作る、画面ごとの切り替え

JSを使わずに、1画面ずつ止まって切り替わり、見出しと数字にも動きをつけた。製材所のサイトを想定した自主制作です。

使えそうな案件

採用サイトやブランドサイトの、見せ場になるページ。ライブラリを足さずに動きを入れたいとき。

動きを減らす設定のとき: 画面は動かさずに切り替えます。
JSが動かないとき: JSを使っていないので、見え方は変わりません。
対応ブラウザー: スクロールに合わせた文字の演出はChrome・Edge 146以上。SafariとFirefoxでは文字の演出だけ出ず、画面の切り替えはふつうに動きます。

GSAP版とも比べましたが、PCで見る限り滑らかさの差はほぼなく、転送量もほとんどが写真とフォントでした。速くなったというより、ライブラリに頼らず短いコードで同じ動きが出せるようになったのが大きいと感じています。