もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

Appleのサイトなどでよく見かけるパララックスのギミックですが、CSSだけで表現してみました。
position: stickyを使い、top: 0で.container内に貼り付く仕組みです。position: stickyは、通常フロー（relativeのような挙動）と固定配置（fixedのような挙動）を組み合わせたポジショニングで、指定したオフセット位置に到達するまでは通常どおりスクロールし、到達したらその位置に“貼り付く”ポジショニングです。

デモ

https://atwork.co.jp/parallax

HTML

<main class="container">
  <section class="slide" id="slide1">
    <div class="slide_inner">Parallax</div>
  </section>
  <section class="slide" id="slide2">
    <div class="slide_inner">Parallax</div>
  </section>
  <section class="slide" id="slide3">
    <div class="slide_inner">Parallax</div>
  </section>
  <section class="slide" id="slide4">
    <div class="slide_inner">Parallax</div>
  </section>
</main>

CSS

.container {
  height: 100vh;
  overflow-x: hidden;
}

.slide {
  position: sticky;
  top: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.slide_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  font-size: 100px;
  font-family: Verdana, Geneva, "sans-serif";
  color: #fff;
}

#slide1 {
  background-image: url("https://atwork.co.jp/wordpress-atwork/wp-content/themes/theme-atwork/images/01.jpg");
}

#slide2 {
  background-image: url("https://atwork.co.jp/wordpress-atwork/wp-content/themes/theme-atwork/images/02.jpg");
}

#slide3 {
  background-image: url("https://atwork.co.jp/wordpress-atwork/wp-content/themes/theme-atwork/images/03.jpg");
}

#slide4 {
  background-image: url("https://atwork.co.jp/wordpress-atwork/wp-content/themes/theme-atwork/images/04.jpg");
}