CSSのみでスクロール時に各セクションを固定するパララックス

Ads
目次
    1. Result
    2. css
    3. html
    4. can i use
    5. via

Result

タイトルでうまく説明できませんでしたけどこういうやつです

パララックスの表現法が出始めた時によく見かけるようになってから今も割と見かけるのである程度定着してる感も無くはないですね

で、これなんですがそう言えばposition: sticky;で出来ますよね、という内容です

css

Code :
.container {/*高さを画面一杯にしておく*/
  height: 100vh;
  overflow-x: hidden;
}
 
.slide {/*position: sticky;を含めてスタイリング。background-size: cover;を忘れずに*/
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.2em;
  color: white;
  background-size: cover;
  background-position: center;
}
 
/*各セクションの背景画像を指定*/
#slide1 {
  background-image: url("hoge.jpg");
}
 
#slide2 {
  background-image: url("huga.jpg");
}
 
#slide3 {
  background-image: url("piyo.jpg");
}
 
#slide4 {
  background-image: url("done.jpg");
}

position: sticky;の動作は以前の記事のposition: sticky;でtableを下スクロール時はヘッダ、横スクロール時は最左を固定をご参照ください

Ads

html

Code :
<main class="container">
  <section class="slide sticky" id="slide1">
    <h1>hogehoge</h1>
  </section>
  <section class="slide sticky" id="slide2">
    <h1>hugahuga</h1>
  </section>
  <section class="slide sticky" id="slide3">
    <h1>piyopiyo</h1>
  </section>
  <section class="slide sticky" id="slide4">
    <h1>done</h1>
  </section>
</main>

can i use

position: sticky;のブラウザ対応状況です。実装はある程度問題ないと見て良さそうです

via

Sticky Sections (Pure CSS)

タイトルとURLをコピーしました