CSS｜ヘッダー固定やフッター固定も簡単！パララックス風もできるposition: stickyとは？②［パララックス編］

2023年5月8日

前回、CSSのposition: stickyの紹介をしました。今回は、CSSのposition: stickyを使用してパララックス風の動きを再現してみたいと思います！

まずはデモをご覧ください。

指定は簡単です。親要素で囲った子要素にposition: stickyと、スクロールした際に固定したい位置を指定します。

.セレクタ{

position: sticky;
position: -webkit-sticky; /* Safari */
top:0

}

HTML

     <body>
            <div class="block img">
              <img src="https://autoproject.nagoya/wp-content/uploads/ap-0-scaled.jpg"></img>
            </div>
            <div class="block content1">
              <p>コンテンツ1</p>
            </div>
            <div class="block img">
              <img src="https://autoproject.nagoya/wp-content/uploads/ap-1-scaled.jpg"></img>
            </div>
            <div class="block  content2">
              <p>コンテンツ2</p>
            </div>
            <div class="block img">
              <img src="https://autoproject.nagoya/wp-content/uploads/ap-2-scaled.jpg"></img>
            </div>
            <div class="block content3">
              <p>コンテンツ3</p>
            </div>
            <div class="block img">
              <img src="https://autoproject.nagoya/wp-content/uploads/ap-4-scaled.jpg"></img>
            </div>
            <div class="block content4">
              <p>コンテンツ4</p>
            </div>
          </div>
        </body>

CSS

.block {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;/* ここに指定 */
  position: -webkit-sticky;/* Safari用 */
  top: 0;/* 固定位置は必ず指定 */
}
p{
  font-weight: bold;
  font-family: 'Great Vibes', cursive;
  color: aliceblue;
  font-size: 3rem;
}

img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.content1 {
  background-color: #72b7b9;
}
.content2{
  background-color: rgb(183, 161, 101);
}
.content3 {
  background-color: rgb(205 150 109);
}
.content4 {
  background-color: rgb(97 126 81);
}