くまだどうも、くまだです。
stickyでパララックス風味なスクロールコンテンツ作成のメモ。
他のstickyの記事はこちら。
stickyでパララックス風スクロール
コードは以下になります。
<div class="container">
<div class="images">
<div class="imagesInner">
<div class="img">
<img src="images/test1.jpg" alt="" />
</div>
<div class="img">
<img src="images/test2.jpg" alt="" />
</div>
<div class="img">
<img src="images/test3.jpg" alt="" />
</div>
</div>
</div>
<div class="textBox">
<div class="block">
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="block">
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="block">
<p>テキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
</div>.container {
display: grid;
grid-template-columns: max-content auto;
grid-template-rows: 1fr;
gap: 30px;
}
.images {
max-width: 500px;
}
.img {
width: 100%;
height: 100%;
display: block;
position: sticky;
top: 0;
}
.imagesInner {
display: grid;
grid-template-rows: 1fr;
}
.img img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 500 / 700;
display: block;
}
.textBox {
color: #000;
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.block {
font-size: 28px;
height: 500px;
}画像エリアとテキストエリアは以下の部分で横並びに配置。
.container {
display: grid;
grid-template-columns: max-content auto;
grid-template-rows: 1fr;
gap: 30px;
}テキストエリアは、中のblock要素3つなので、grid-template-rowsで縦に3等分。
.textBox {
color: #000;
display: grid;
grid-template-rows: repeat(3, 1fr);
}画像にはposition:sticky;とtop:0;を指定して画像をスティッキーにさせる。
.img {
width: 100%;
height: 100%;
display: block;
position: sticky;
top: 0;
}position:sticky;は親・祖先要素にoverflow:hiddenが当たっているとスティッキーが効かなくなるので注意する。どうしてもoverflow:hidden;を使う必要がある場合は、overflow:clip;で代用する。
ここまで読んでくださりありがとうございました。