<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("https://images.unsplash.com/photo-1701735168006-1c7cbb9caff9?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2MDg1MjR8&ixlib=rb-4.0.3&q=85&w=600");
width: 250px;
height: 200px;
background-size: 500px;
--toBackgroundSize: 250px;
align-self: center;
top: 14rem;
z-index: 1;
}
.img2 {
background-image: url(https://images.unsplash.com/photo-1614094723471-ed6e2cf28cad?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDQyOTI4OTJ8&ixlib=rb-4.0.3&q=80&w=400);
width: 200px;
height: 400px;
background-size: 300px;
--toBackgroundSize: 400px;
left: 20vw;
}
.img3 {
background-image: url("https://images.unsplash.com/photo-1523606772308-64a28db0ef2c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDQyOTI4OTJ8&ixlib=rb-4.0.3&q=80&w=400");
width: 450px;
height: 225px;
background-size: 450px;
--toBackgroundSize: 600px;
align-self: flex-end;
margin-bottom: 2rem;
left: 40vw;
top: 6rem;
}
.img4 {
background-image: url("https://images.unsplash.com/photo-1476574898132-040f50db0a01?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDQzMTEzMzd8&ixlib=rb-4.0.3&q=80&w=400");
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.