Animation-timeline view() – apparition avec inset
HTML
index.html <div class="top"></div>
<div class="bottom"></div>
<h1>Exemple title</h1>
<h2>Lorem ipsum dolor sit amet consectetur </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<h2>Lorem ipsum dolor sit amet consectetur </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="image" class="projects__img">
<h2>Lorem ipsum dolor sit amet consectetur </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<h2>Lorem ipsum dolor sit amet consectetur </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
CSS
style.css @layer demo {
img {
animation: fadein linear 0.5s both;
animation-timeline: view(200px 100px);
opacity: 0;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
@layer demoStyles {
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
max-width: 50vw;
margin-inline: auto;
font-size: 1.2rem;
}
h1,
h2 {
text-align: left;
}
img {
width: 600px;
}
p {
line-height: 2;
}
div {
border: 0;
border-top: 1px dashed cyan;
width: 100%;
position: fixed;
background: transparent;
height: 0;
z-index: 2;
&::before {
position: absolute;
top: 0;
left: 0;
color: cyan;
counter-reset: variable var(--offset);
content: counter(variable) "px";
}
&.top {
--offset: 200;
top: calc(var(--offset) * 1px);
}
&.bottom {
--offset: 100;
bottom: calc(var(--offset) * 1px);
}
}
}