【備忘録】CSSのstickyで作る、せり上がりながら背景が見える演出

時々作っては作り方を忘れるので備忘録も兼ねて記事にします。正式名称を知らないのですが、スクロールしていくと前景のコンテンツがカーテンみたいにせり上がって背景が見えてくる演出のやつです。 ▼こういうやつ position: stickyを使うメリット position: fixedで背景に固定するのもいいですが、全体のレイアウトに影響があり関係ない要素まで副作用に巻き込まれるおそれがあります。position: stickyを使うとこの演出前後のみに影響を抑えられるのでコントロールがしやすいです。 実装ポイント 模式的に3つのセクションにわけて説明します。せり上がる要素がセクション1（ピンク）、背景に表示される要素がセクション2（水色）、そして再び前景として見えてくるのがセクション3（緑）とします。HTMLは次のようになります。 <section class="section section

[ugo_uozumi]

広告とかでたまに見るやつ。分類するならパララックス系のエフェクトかな？

[alivekanade]

やる。

[gadget-lab]

後で読みたい。【備忘録】CSSのstickyで作る、せり上がりながら背景が見える演出