clip-path スライド出現
要素が右から左へ一気に現れる出現アニメーションです。仕組みは clip-path のインセット指定で、初期状態を inset(0 100% 0 0) として右側を完全に切り取り、 @keyframes で inset(0 0 0 0) まで戻すことで「マスクが開いて中身が見える」演出を実現しています。
解説
要素が右から左へ一気に現れる出現アニメーションです。仕組みは clip-path のインセット指定で、初期状態を inset(0 100% 0 0) として右側を完全に切り取り、@keyframes で inset(0 0 0 0) まで戻すことで「マスクが開いて中身が見える」演出を実現しています。forwards を付けているので再生後はそのまま表示され続けます。
使う場面
- ヒーローの写真やキャッチコピーのファーストビュー
- 作品ギャラリーで画像を順に出すリビール
- セクション見出しの登場アクセント
方向を変えたい時は inset の切り取り辺を入れ替えます。たとえば左から出すなら左側を切る指定にします。速度と質感は animation の 1.2s とイージングで調整可能です。スクロール連動にしたい場合は IntersectionObserver で画面に入った時にクラスを付ける形へ拡張すると、初期表示外の要素も自然に見せられます。
使用例・適したシーン
- スクロール演出
- ヒーロー画像登場
- ストーリーテリング型 LP
よくある質問
出る向きを左からに変えられますか。
変えられます。clip-path の inset で切り取る辺を右ではなく左に指定すれば、左から右へ開く動きになります。
スクロールで見えた時に再生したいです。
IntersectionObserver を使い、要素が画面内に入ったらアニメーション用のクラスを付与する方法が一般的です。これで初期表示外の要素も自然に出せます。