<!--

Forum question answer only:


-->
<header>
  <h1>Start scrolling. This first background will scroll away.</h1>
</header>

<div class="main">
  <div class="section s1" data-src=".BG1">
    <div class="text">
      <div style="margin-inline: 20px">
        <h1>Our Story</h1>
        <div class="story-description">
          <p><b>We help</b>
            <span>Startups</span>
            <span>and</span>
            <span>Digital</span>
            <span>agencies</span>
            <span>launch</span>
            <span>projects</span>
            <span>on</span>
            <span>time</span>
            <span>with</span>
            <span>no</span>
            <span>pain</span>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="section s2" data-src=".BG2">
    <div class="text">
      <div style="margin-inline: 20px">
        <div class="story-description">
               <p><b>We help (2)</b>
            <span>Startups</span>
            <span>and</span>
            <span>Digital</span>
            <span>agencies</span>
            <span>launch</span>
            <span>projects</span>
            <span>on</span>
            <span>time</span>
            <span>with</span>
            <span>no</span>
            <span>pain</span>
          </p>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="section s3" data-src=".BG3">
    <div class="text">
      <div style="margin-inline: 20px">
        <div class="story-description">
              <p><b>We help (3)</b>
            <span>Startups</span>
            <span>and</span>
            <span>Digital</span>
            <span>agencies</span>
            <span>launch</span>
            <span>projects</span>
            <span>on</span>
            <span>time</span>
            <span>with</span>
            <span>no</span>
            <span>pain</span>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="section s4" data-src=".BG4">
    <div class="text">
      <div style="margin-inline: 20px">
        <div class="story-description">
            <p><b>We help (4)</b>
            <span>Startups</span>
            <span>and</span>
            <span>Digital</span>
            <span>agencies</span>
            <span>launch</span>
            <span>projects</span>
            <span>on</span>
            <span>time</span>
            <span>with</span>
            <span>no</span>
            <span>pain</span>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="section s5" data-src=".BG5">
    <div class="text">
      <div style="margin-inline: 20px">
        <div class="story-description">
         <p><b>We help (5)</b>
            <span>Startups</span>
            <span>and</span>
            <span>Digital</span>
            <span>agencies</span>
            <span>launch</span>
            <span>projects</span>
            <span>on</span>
            <span>time</span>
            <span>with</span>
            <span>no</span>
            <span>pain</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="BG BG1"></div>
<div class="BG BG2"></div>
<div class="BG BG3"></div>
<div class="BG BG4"></div>
<div class="BG BG5"></div>
/*

Forum question answer only:



*/
html,
body {
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
  margin: 0;
  padding: 1rem 0;
}
header {
  background: url(https://picsum.photos/id/1018/2000/1000) no-repeat 50% 50%;
  background-size: cover;
}
header,
footer,
.main {
  min-height: 100vh;
}

.section {
  min-height: 100vh;
  display: flex;
  z-index: 1;
  position: relative;
  background-size: cover;
}
.text {
  margin: auto;
}

.text p {
  font-family: "Lato";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 149%;
  color: #263244;
}

.text h1 {
  margin-bottom: 20px;
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  line-height: 0px;
  color: #ffffff;
  margin-bottom: 50px;
}

.text .story-description {
  max-width: 321px;
  border-radius: 20px;
  background: radial-gradient(
    76.31% 191.89% at 13.43% 22.19%,
    rgba(226, 228, 231, 0.8) 0%,
    rgba(228, 228, 229, 0.368) 100%
  );
  backdrop-filter: blur(10px);
  padding: 23px;
}

.BG1 {
  background: url(https://picsum.photos/id/200/2000/1000) no-repeat 50% 50%;
}
.BG2 {
  background: url(https://picsum.photos/id/201/2000/1000) no-repeat 50% 50%;
}
.BG3 {
  background: url(https://picsum.photos/id/202/2000/1000) no-repeat 50% 50%;
}
.BG4 {
  background: url(https://picsum.photos/id/203/2000/1000) no-repeat 50% 50%;
}
.BG5 {
  background: url(https://picsum.photos/id/204/2000/1000) no-repeat 50% 50%;
}

.BG {
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  right: 0;
  bottom: -10vh; /* ios bounce*/
  background-size: cover;
  opacity: 0;
  transition: opacity 2s ease;
}
.BG.active {
  opacity: 1;
}

/* text reveal */
.story-description p span {
  opacity: 0;
}

.active .story-description p span {
  animation: reveal 1s 0.5s ease forwards;
}
@keyframes reveal {
  to {
    opacity: 1;
  }
}
@keyframes textColor {
  to {
    color: red;
  }
}
.active .story-description p span:nth-child(2) {
  animation-delay: 0.5s;
}
.active .story-description p span:nth-child(3) {
  animation: reveal 1s 0.5s ease forwards, textColor 1s forwards;
  animation-delay: 0.8s, 1.6s;
}
.active .story-description p span:nth-child(4) {
  animation-delay: 1.1s;
}
.active .story-description p span:nth-child(5) {
  animation: reveal 1s 0.5s ease forwards, textColor 1s forwards;
  animation-delay: 1.3s, 2.6s;
}
.active .story-description p span:nth-child(6) {
  animation-delay: 1.5s;
}
.active .story-description p span:nth-child(7) {
  animation-delay: 1.8s;
}
.active .story-description p span:nth-child(8) {
  animation: reveal 1s 0.5s ease forwards, textColor 1s forwards;
  animation-delay: 2.1s, 4.2s;
}
.active .story-description p span:nth-child(9) {
  animation-delay: 2.4s;
}
.active .story-description p span:nth-child(10) {
  animation-delay: 2.7s;
}
.active .story-description p span:nth-child(11) {
  animation-delay: 3s;
}
.active .story-description p span:nth-child(12) {
  animation-delay: 3.3s;
}
/*

Forum question answer only:

*/

(function (d) {
  "use strict";

  const myBG = d.querySelectorAll("[data-src]");
  var imgFixed = "";
  let options = {
    root: null,
    rootMargin: "0px",
    threshold: 0.1
  };

  function calculateVisibleDiv(entries) {
    entries.map((entry, index) => {
      if (entry.isIntersecting) {
        imgFixed = entry.target.dataset.src;
       entry.target.classList.add('active'); d.querySelector(imgFixed).classList.add("active");
      } else {
        imgFixed = entry.target.dataset.src;
        entry.target.classList.remove('active');
        d.querySelector(imgFixed).classList.remove("active");
      }
    });
  }
  let observer = new IntersectionObserver(calculateVisibleDiv, options);

  myBG.forEach((entry) => {
    observer.observe(entry);
  });
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.