<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>
body {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  font-family: Lora, serif;
  overflow-x: hidden;
}

.slide {
  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;
}
.slide h1 {
  font-size: 250%;
  text-shadow: 0 2px 2px black;
}

#slide1 {
  background-image: url("https://source.unsplash.com/1600x900/?nature,water");
}

#slide2 {
  background-image: url("https://source.unsplash.com/1600x1000/?nature,water");
}

#slide3 {
  background-image: url("https://source.unsplash.com/1600x800/?nature,water");
}

#slide4 {
  background-image: url("https://source.unsplash.com/1600x1100/?nature,water");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.