clip-path / mask / filter見える範囲を変える
ワイプ・中央・円形・斜めはclip-path、ブラインドはmask、ブラー・フェードはfilterとopacityを使います。画像の縮小は内側のimgに適用します。
CSS CLIP / MASK / SCROLL
CSS Image Reveal Studio.
ヒーローの登場も、スクロールでの出現も。CSSで画像の現れ方を作る。
LIVE IMAGE REVEAL
画像が現れる動きを調整する
ボタンを押すと、画像が最初から現れます。
スライダーを動かすと、アニメーションを止めて形を確認できます。
USE IN YOUR PROJECT
設定した画像出現を使う
CSSをコピー。
画像付きHTMLも保存。
現在のパターン・動き・出現する場面に合ったコードを出力します。保存するHTMLには選んだ画像も含まれるので、1ファイルで動作を確認できます。
出現アニメーションはCSS。「再生」ボタンの開始・再実行にはJavaScriptを使います。
OSの「動きを減らす」設定では、画像を完成状態で表示します。スクロール連動に非対応のブラウザーでも画像は隠しません。
CURRENT SETTINGS
HOW IT WORKS
形の変化と、開始のきっかけを分ける
@property + @keyframes共通の進行度を動かす
数値型のカスタムプロパティを0から1へ変化させます。プレビュー、途中の形、出力CSSは同じ計算式で描画します。
view-timeline + animation-rangeスクロールで進める
画像の枠が画面内に入る進み具合を使います。時間ではなくスクロール位置に連動するため、戻すと逆再生になります。1度だけ再生する方式とは異なります。
画像の出現は装飾です。見出し・説明・操作ボタンを一緒に隠さず、読める状態に保ちます。対応ブラウザーではCSSだけでスクロール連動が動きます。
参考：MDN：clip-path · MDN：@property · MDN：animation-timeline · MDN：animation-range