コピペで使えるCSSのposition:sticky;でパララックス風スクロール

CSSのposition:sticky;background-attachment:fixed;を使うとパララックス風スクロールになります。
CSSのposition:sticky;background-attachment:scroll;との違いを確認できます。（背景がスクロールするか固定されるかを確認してください）
サンプルを見る
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>position:sticky;でパララックス風スクロール</title>
<style>
body{margin:0;}
.block {
  box-sizing:border-box;
  top: 0;
  margin:0;
  padding:2em;
  width: 100vw;
  height: 100vh;
  position: sticky;
}
.block-one {
  z-index:100;
  background-image: url("/cg/sozai/sky/0001.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:cover;
}
.block-two {
  z-index:200;
  background-image:
    url("/cg/sozai/texture/stone01.jpg"); 
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
}
.block-three {
  z-index:300;
  background-image: url("/cg/sozai/sky/0001.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:cover;
}
.block-four {
  z-index:400;
  background-image:
    url("/cg/sozai/texture/stone01.jpg"); 
  background-repeat: repeat;
  background-attachment: scroll;
  background-size: auto;
}
.block-five {
  z-index:500;
  background-image: url("/cg/sozai/sky/0001.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size:cover;
}
.block-six {
  z-index:600;
  background-color: #DEDCB8;
}
</style>
</head>
<body>

  <div class="block block-one">
    <h1>position:sticky;でパララックス風スクロール</h1>
    <h2>(1)画像１つを背景に全面配置</h2>
    <p>下にスクロールしてください</p>
    <pre>
box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:100;
background-image: url("/cg/sozai/sky/0009.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size:cover;
    </pre>
  </div>

  <div class="block block-two">
    <h2>(2)画像１つを背景にリピート配置</h2>
    <p>下にスクロールしてください</p>
    <p>background-attachment:fixed;<br>（背景はスクロールしない）</p>
    <pre>
box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:200;
background-image:
  url("/cg/sozai/texture/s_concrete01.jpg"); 
background-repeat: repeat;
background-attachment: fixed;
background-size: auto;
    </pre>
  </div>

  <div class="block block-three">
    <h2>(3)画像１つを背景に全面配置</h2>
    <p>下にスクロールしてください</p>
    <p>background-attachment:fixed;<br>（背景はスクロールしない）</p>
    <pre>
box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:300;
background-image: url("/cg/sozai/sky/0009.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size:cover;
    </pre>
  </div>


  <div class="block block-four">
    <h2>(4)画像１つを背景にリピート配置</h2>
    <p>下にスクロールしてください</p>
    <p>background-attachment: scroll;<br>（背景もスクロールする）</p>
    <pre>
box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:400;
background-image:
  url("/cg/sozai/texture/s_concrete01.jpg"); 
background-repeat: repeat;
background-attachment: scroll;
background-size: auto;
    </pre>
  </div>

  <div class="block block-five">
    <h2>(5)画像１つを背景に全面配置</h2>
    <p>下にスクロールしてください</p>
    <p>background-attachment: scroll;<br>（背景もスクロールする）</p>
    <pre>
box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
    </pre>
  </div>

  <div class="block block-six">
    <h2>(6)画像無しで背景色のみの場合</h2>
    <p>下にスクロールしてください</p>
    <pre>
box-sizing:border-box;
top: 0;
margin:0;
padding:2em;
width: 100vw;
height: 100vh;
position: sticky;
z-index:600;
background-color: #DEDCB8;
    </pre>



  </div>
</body>
</html>