触って確かめる、Web表現の見本帖。 「こういう動き、なんて呼ぶんだろう」を目的から引ける辞典です。
12件
Intersection Observer
画面に入ってきたときだけ、要素をふわっと出す。紹介ページでいちばん見かける動き。
＋JavaScript少し 定番
Scroll-driven animations
スクロール量そのものを動きの時間軸にする。写真がゆっくりずれる演出や読み進みバーが、JavaScript なしで作れる。
CSSのみ 要フォールバック
stroke-dashoffset
線が引かれていくようにロゴやアイコンを描く。CSS のアニメーションだけで作れる。
CSSのみ 定番
View Transitions
一覧から詳細へ、同じ要素がつながったまま動く。切り替えの「間」をブラウザが作ってくれる。
＋JavaScript少し 新顔
<dialog>
暗幕・Esc で閉じる・キーボード操作の閉じ込めが最初から付いてくる。ライブラリが要らなくなった代表例。
HTML標準 定番
position: sticky
スクロールの途中で上に張りつき、次の見出しに押し出される。長い記事の現在地表示に。
scroll-snap
横に並べた写真を、1枚ずつ止めながら見せる。指を離した位置ではなく、決めた位置で止まる。
Container queries
画面幅ではなく「置かれた枠の幅」で切り替える。同じカードをどこに入れても正しく崩れる。
aspect-ratio
幅が変わっても縦横の比率を保つ。画像やカードの「読み込んだ瞬間ガタッとずれる」を消せる。
background-clip: text
文字そのものを塗り分ける。見出し1行の印象を変えるいちばん軽い手。
backdrop-filter
自分の後ろにあるものをぼかす。写真の上でも文字が読める板が作れる。
CSSのみ 新顔
accent-color
チェックボックスやスライダーの色を1行で変える。部品を自作せずにブランド色をなじませられる。
その言い方の項目はまだありません。別の言葉でも試してみてください。
対応状況は各項目の確認日時点のものです。自動更新はしていません。
