【CSS】stickyでパララックス風スクロール

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

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;で代用する。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧