<div class="page">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ratione quia ducimus vitae reiciendis temporibus? Officia eos aliquid hic nam quia quis, laboriosam quaerat omnis optio nesciunt sed labore corporis.</p>
  <p>Excepturi optio esse quas facere asperiores a fugit culpa enim non eos dignissimos, aperiam soluta ad architecto veniam ratione, quod vel officiis rerum? Impedit nisi, numquam harum quasi sequi sapiente?</p>
  <p>Minima quaerat quia illum commodi doloribus labore sunt nemo earum aliquam ratione. Aspernatur, alias quia. Vel iste fuga quae veritatis distinctio, id neque sequi ipsum nisi recusandae tenetur alias sit?</p>
  <p>Praesentium modi minus nisi odio nemo alias soluta sapiente nobis eveniet, quidem quibusdam tempore pariatur similique vero illo minima porro maiores recusandae, natus distinctio unde excepturi. Consectetur accusamus perspiciatis delectus.</p>
  <p>Consequuntur officia repellat nostrum quidem, dolor est facilis consequatur, nisi adipisci commodi laboriosam alias aliquam nemo iure modi perferendis impedit natus iste expedita! Magni eveniet necessitatibus eum nemo aliquid deserunt?</p>
  <div class="imgs">
    <div class="img img1"></div>
    <div class="img img2"></div>
    <div class="img img3"></div>
    <div class="img img4"></div>
  </div>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio aperiam, facere nihil velit dolorum modi enim tempore at accusamus perferendis animi, vel ipsam? Eos distinctio dolor nihil ad provident aliquid?</p>
  <p>Autem accusamus, doloremque quia fugiat pariatur molestiae nemo reprehenderit qui? Earum fugit hic blanditiis, itaque debitis eum nam tempore ipsa quaerat illo velit! Veniam beatae doloremque, dignissimos dolorem aut quibusdam?</p>
  <p>Dolorum pariatur ad eaque, voluptates at quaerat numquam neque dicta suscipit repellat? Necessitatibus, perspiciatis voluptatibus numquam excepturi veritatis ex rem in vitae iure culpa, neque delectus. Unde temporibus provident voluptate!</p>
  <p>Quisquam obcaecati sed labore nostrum recusandae reiciendis magnam maiores velit dolorum alias voluptatum dignissimos quis corrupti distinctio quo adipisci eum, repellat consectetur omnis rerum aspernatur fugiat voluptatibus nisi neque! Quasi.</p>
  <p>Sunt incidunt ea tempora eius, esse optio consectetur distinctio corrupti voluptatum accusamus beatae quae libero officia dicta ex repellendus natus iste fugit qui, sequi eveniet adipisci nisi quisquam! Assumenda, eligendi.</p>
</div>

.page {
  height: 400dvh;
}

.img {
  animation-range: cover 0% cover 100%;
  animation: the-animation linear;
  animation-timeline: view();
  animation-iteration-count: 1;

  background-repeat: no-repeat;
  background-position: center;
}

.img1 {
  background-image: url(photo-1701735168006-1c7cbb9caff9.jpg");
  width: 250px;
  height: 200px;
  background-size: 500px;
  --toBackgroundSize: 250px;
  align-self: center;
  top: 14rem;
  z-index: 1;
}

.img2 {
  background-image: url(photo-1614094723471-ed6e2cf28cad.jpg);
  width: 200px;
  height: 400px;
  background-size: 300px;
  --toBackgroundSize: 400px;
  left: 20vw;
}

.img3 {
  background-image: url("photo-1523606772308-64a28db0ef2c.jpg");
  width: 450px;
  height: 225px;
  background-size: 450px;
  --toBackgroundSize: 600px;
  align-self: flex-end;
  margin-bottom: 2rem;
  left: 40vw;
  top: 6rem;
}

.img4 {
  background-image: url("photo-1476574898132-040f50db0a01.jpg");
  width: 300px;
  height: 200px;
  background-size: 300px;
  --toBackgroundSize: 400px;
  left: 60vw;
  top: 14rem;
}

@keyframes the-animation {
  to {
    background-size: var(--toBackgroundSize);
  }
}

.imgs {
  position: relative;
  height: 450px;
  .img {
    position: absolute;
  }
}

body {
  margin: 0;
  overflow-x: clip;
}

p {
  max-inline-size: 40ch;
  margin-inline: auto;
  font: 120%/1.7 system-ui;
}