SOURCE

    <section class="banner">
      <div class="container">
        <div class="sec">
          <h3></h3>
        </div>
        <div class="sec">
          <h3></h3>
        </div>
        <div class="sec">
          <h3></h3>
        </div>
        <div class="sec">
          <h3></h3>
        </div>
        <div class="sec">
          <h3></h3>
        </div>
        <div class="sec">
          <h3></h3>
        </div>
        <div class="content">
          <h2>
            <span style="--i:1"> S </span>
            <span style="--i:2"> t </span>
            <span style="--i:3"> i </span>
            <span style="--i:4"> c </span>
            <span style="--i:5"> k </span>
            <span style="--i:6"> y </span>
          </h2>
        </div>
        <div class="sec">
          <h3></h3>
        </div>
      </div>
    </section>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
.sec {
  border: 2px solid red;
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  scroll-snap-align: center;

  /* mix-blend-mode: multiply; */
}
h3 {
  color: #fff;
  font-size: 10vw;
  text-align: center;
  margin: 0 50px;
}

.sec:nth-child(1) {
  background: #f00
    url('https://scpic.chinaz.net/files/pic/pic9/202102/apic30709.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: multiply;
}

.sec:nth-child(2) {
  background: #0f0
    url('https://scpic.chinaz.net/files/pic/pic9/202104/apic32198.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: multiply;
}

.sec:nth-child(3) {
  background: #ff0
    url('https://scpic.chinaz.net/files/pic/pic9/202103/apic31725.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: multiply;
}
.sec:nth-child(4) {
  background: #00f
    url('https://scpic.chinaz.net/files/pic/pic9/202012/apic29928.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: multiply;
}
.sec:nth-child(5) {
  background: rgb(206, 31, 250)
    url('https://scpic.chinaz.net/files/pic/pic9/202106/bpic23472.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: multiply;
}
.sec:nth-child(6) {
  background: rgb(255, 166, 0)
    url('https://scpic.chinaz.net/files/pic/pic9/201609/fpic7218.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: multiply;
}
.sec:nth-child(7) {
  background: #0f0
    url('https://scpic.chinaz.net/files/pic/pic9/202105/hpic4006.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-blend-mode: multiply;
}

.content {
  position: absolute;
  top: 0;
  width: 100%;
  border: 1px solid #fff;
  text-align: center;
}
.content h2 {
  position: relative;
  display: flex;
  justify-content: center;
  border: 2px dotted #fff;
}
.content h2 span {
  position: sticky;
  top: 0;
  line-height: 100vh;
  height: 100vh;
  color: #fff;
  font-size: 14vw;
  margin-top: calc(100vh * var(--i));
}

/* https://www.bilibili.com/video/BV1QK4y1E7H6 */