JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="background">
  <img src="https://dummyimage.com/600x1200/000/fff" alt="">
</div>

<p class="p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto amet voluptatum incidunt, atque est corporis dolor ipsa recusandae, illo qui nisi commodi. Nobis itaque officiis veniam, a porro error quia.
</p>

<div class="to-top">
            <div class="section">
              <div class="section-img">
                <div class="section-img-inner samp1"></div>
              </div>
              <div class="section-body">
                <div class="section-text">
                  <h2>Title 1</h2>
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Quas modi sapiente fugit quae nisi consectetur totam
                    similique expedita, quasi, minus neque aut fugiat beatae
                    repudiandae necessitatibus vitae, earum minima inventore.
                  </p>
                </div>
              </div>
            </div>

            <div class="section">
              <div class="section-img">
                <div class="section-img-inner samp2"></div>
              </div>
              <div class="section-body">
                <div class="section-text">
                  <h2>Title 2</h2>
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Quas modi sapiente fugit quae nisi consectetur totam
                    similique expedita, quasi, minus neque aut fugiat beatae
                    repudiandae necessitatibus vitae, earum minima inventore.
                  </p>
                </div>
              </div>
            </div>

            <div class="section">
              <div class="section-img">
                <div class="section-img-inner samp3"></div>
              </div>
              <div class="section-body">
                <div class="section-text">
                  <h2>Title 3</h2>
       ...

CSS

.background {
  margin: 0 auto;
  text-align: center;
  display: block;
  height: 100vh;
  position: relative;
  z-index: 999;
}
.background img {
  height: 100%;
  width:100%;
  object-fit:contain;
}

.section {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}
.section-img {
  position: relative;
  display: flex;
}
.section-img-inner {
  height: 100vh;
  position: fixed;
  left: 5%;
  width: 40%;
  top: 0;
  mix-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  filter: blur(30px);
  opacity: 0;
  transition: 0.6s ease, opacity 0.6s ease, background-position 0.8s ease;
}
.section-img-inner.samp1 {
  background-image: url("https://dummyimage.com/600x400/c431c4/fff&text=1");
}
.section-img-inner.samp2 {
  background-image: url("https://dummyimage.com/600x400/f97432/fff&text=2");
}
.section-img-inner.samp3 {
  background-image: url("https://dummyimage.com/600x400/cb0004/fff&text=3");
}
.section-img-inner.samp4 {
  background-image: url("https://dummyimage.com/600x400/ececec/fff&text=4");
}
.section-img-inner.samp5 {
  background-image: url("https://dummyimage.com/600x400/000000/fff&text=5");
}
.section-body {
  display: flex;
  align-items: center;
}
.section-body-text {
  padding: 5vw;
}
.section.active .section-img-inner {
  opacity: 1;
  background-position: 50% 50%;
  filter: blur(0);
}
.section h2 {
  font-size: 3vw;
  margin-bottom: 0.5em;
}
.section > * {
  width: 50%;
}

JavaScript

$(window)
  .scroll(function () {
    let o = $(window),
      i = $("body"),
      t = $(".section");
    s = o.scrollTop() + o.height() / 3;
    t.each(function () {
      console.log("top", $(this).position().top);
      console.log("s", s);
      $(this).position().top <= s &&
        $(this).position().top + $(this).height() > s &&
        i.removeClass(
          function (o, i) {
            return i.match(/(^|\s)color-\s+/g) || [].join(" ");
          },
          $(".section").removeClass("active"),
          $(this).addClass("active")
        );
    });
  })
  .scroll();