<section id="main"></section>

  <div class="main-text">
    <p>Hello,</p>
    <p>This page has scroll animations</p>
    <p>The animations change depending on user preferences</p>
    <p>
      By default, the boxes fade-in from the right side of the page and move toward the left.
      If the user prefers reduced motion, the boxes just fade-in without movement.
    </p>
  </div>
  </section>


  <section id="sections">
    <div class="sections-text">
      <h2>Section</h2>
      <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, dicta?</h3>
    </div>
    <div class="container">
      <div class="box box-1">
        <h2>Box 1</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
          officia sapiente natus!
        </p>
      </div>
      <div class="box box-2">
        <h2>Box 2</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
          officia sapiente natus!
        </p>
      </div>
      <div class="box box-3">
        <h2>Box 3</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
          officia sapiente natus!
        </p>
      </div>
    </div>
  </section>

  <section id="sections">
    <div class="sections-text">
      <h2>Section</h2>
      <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, dicta?</h3>
    </div>
    <div class="container">
      <div class="box box-1">
        <h2>Box 1</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
          officia sapiente natus!
        </p>
      </div>
      <div class="box box-2">
        <h2>Box 2</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
          officia sapiente natus!
        </p>
      </div>
      <div class="box box-3">
        <h2>Box 3</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
          officia sapiente natus!
        </p>
      </div>
    </div>
  </section>

  <section id="sections">
    <div class="sections-text">
      <h2>Section</h2>
      <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, dicta?</h3>
    </div>
    <div class="container">
      <div class="box box-1">
        <h2>Box 1</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
          officia sapiente natus!
        </p>
      </div>
      <div class="box box-2">
        <h2>Box 2</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
          officia sapiente natus!
        </p>
      </div>
      <div class="box box-3">
        <h2>Box 3</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit perspiciatis accusantium nesciunt,
          officia sapiente natus!
        </p>
      </div>
    </div>
  </section>
@charset "utf=8";
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

body {
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif;
  background: #301934;
}
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
#main {
  width: 100%;
  height: 100vh;
  position: relative;
}
.main-text {
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.main-text p:nth-child(1) {
  font-weight: 500;
  font-size: 27px;
  line-height: 20px;
}
.main-text p:nth-child(2) {
  font-size: 55px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.main-text p:nth-child(3) {
  font-size: 30px;
  line-height: 50px;
}
.main-text p:nth-child(4) {
  font-size: 20px;
  line-height: 25px;
}
.main-text p {
  color: #b393d3;
  margin: 23px 0px 25px;
  line-height: 58px;
}
#sections {
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0px;
  flex-direction: column;
  overflow: hidden;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0px;
}
.sections-text h2 {
  font-weight: 600;
  color: #b393d3;
  font-size: 30px;
  line-height: 0px;
}
.sections-text h3 {
  font-weight: 500;
  color: #b393d3;
}
.box {
  width: 300px;
  height: 320px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 7px;
  margin: 15px;
  background: rgba(85, 60, 154, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
  transform: translateX(0);
  opacity: 1;
}
@keyframes reveal {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .box {
    transform: translateX(0);
    opacity: 0;
  }
  .reveal {
    opacity: 1;
  }
  @keyframes reveal {
    to {
      opacity: 1;
    }
  }
}

.box h2 {
  color: #301934;
  font-size: 23px;
  line-height: 0px;
}
.box p {
  text-align: center;
  width: 230px;
  margin: 0px 0px 20px 0px;
  color: #fff;
}
@media (max-width: 1000px) {
  * {
    box-sizing: border-box;
  }
  .main-text {
    top: 46%;
  }
}
@media (max-width: 1140px) {
  .main-text {
    margin: 10px;
  }
  .main-text h1 {
    font-size: 3rem;
  }
}
@media (max-width: 720px) {
  .main-text {
    width: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
function reveal() {
  const boxes = document.querySelectorAll(".box");

  for (let i = 0; i < boxes.length; i++) {
    const windowHeight = window.innerHeight;
    const elementTop = boxes[i].getBoundingClientRect().top;
    const elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      boxes[i].classList.add("reveal");
    } else {
      boxes[i].classList.remove("reveal");
    }
  }
}

window.addEventListener("scroll", reveal);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.