CSSのposition: stickyとbackground-attachmentを組み合わせることで、JavaScriptを使わずにパララックス風のスクロール演出を実現できます。
このページでは、背景画像を固定（fixed）またはスクロール（scroll）させる違いを比較できる6つのサンプルを掲載。
「position sticky パララックス」「sticky background image css」などのキーワードでお探しの方におすすめの、軽量で視覚的にわかりやすいCSSサンプル集です。
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>