<div class="intro">
<div>Scroll down</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
</svg>
</div>
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTEyNjg5NDZ8&ixlib=rb-4.0.3&q=85">
<div class="warning">
This demo uses scroll driven animations in CSS, it seems your current browser does not support this.<br />
However, if you are using one of the evergreen browsers, you should notice this page still works even without them.
</div>
@property --clip-1-a {
syntax: "<percentage>";
initial-value: 61%;
inherits: false;
}
@property --clip-1-b {
syntax: "<percentage>";
initial-value: 35%;
inherits: false;
}
@property --clip-2-a {
syntax: "<percentage>";
initial-value: 98%;
inherits: false;
}
@property --clip-2-b {
syntax: "<percentage>";
initial-value: 35%;
inherits: false;
}
@property --clip-3-a {
syntax: "<percentage>";
initial-value: 68%;
inherits: false;
}
@property --clip-3-b {
syntax: "<percentage>";
initial-value: 57%;
inherits: false;
}
@property --clip-4-a {
syntax: "<percentage>";
initial-value: 79%;
inherits: false;
}
@property --clip-4-b {
syntax: "<percentage>";
initial-value: 91%;
inherits: false;
}
@property --clip-5-a {
syntax: "<percentage>";
initial-value: 50%;
inherits: false;
}
@property --clip-5-b {
syntax: "<percentage>";
initial-value: 70%;
inherits: false;
}
@property --clip-6-a {
syntax: "<percentage>";
initial-value: 21%;
inherits: false;
}
@property --clip-6-b {
syntax: "<percentage>";
initial-value: 91%;
inherits: false;
}
@property --clip-7-a {
syntax: "<percentage>";
initial-value: 32%;
inherits: false;
}
@property --clip-7-b {
syntax: "<percentage>";
initial-value: 57%;
inherits: false;
}
@property --clip-8-a {
syntax: "<percentage>";
initial-value: 2%;
inherits: false;
}
@property --clip-8-b {
syntax: "<percentage>";
initial-value: 35%;
inherits: false;
}
@property --clip-9-a {
syntax: "<percentage>";
initial-value: 39%;
inherits: false;
}
@property --clip-9-b {
syntax: "<percentage>";
initial-value: 35%;
inherits: false;
}
img {
display: block;
width: 50%;
max-width: 50%;
object-fit: cover;
object-position: top;
margin-block-end: 100vh;
margin-inline: auto;
aspect-ratio: 1;
animation: updateStar linear both;
animation-timeline: view(block);
animation-range: cover 20% contain 60%;
clip-path: polygon(
50% 0%,
var(--clip-1-a) var(--clip-1-b),
var(--clip-2-a) var(--clip-2-b),
var(--clip-3-a) var(--clip-3-b),
var(--clip-4-a) var(--clip-4-b),
var(--clip-5-a) var(--clip-5-b),
var(--clip-6-a) var(--clip-6-b),
var(--clip-7-a) var(--clip-7-b),
var(--clip-8-a) var(--clip-8-b),
var(--clip-9-a) var(--clip-9-b)
);
}
@keyframes updateStar {
0%,
50% {
--clip-1-a: 100%;
--clip-1-b: 0%;
--clip-2-a: 100%;
--clip-3-a: 100%;
--clip-4-a: 100%;
--clip-4-b: 100%;
--clip-5-a: 50%;
--clip-5-b: 100%;
--clip-6-a: 0%;
--clip-6-b: 100%;
--clip-6-a: 0%;
--clip-6-b: 100%;
--clip-7-a: 0%;
--clip-8-a: 0%;
--clip-9-a: 0%;
--clip-9-b: 0%;
}
}
.intro {
font-size: 4rem;
font-family: sans-serif;
display: flex;
flex-direction: column;
height: 100dvh;
place-content: center;
place-items: center;
& svg {
width: 5vw;
height: 5vw;
animation: scrollIndicator 4s ease-out infinite;
}
}
@keyframes scrollIndicator {
0% {
opacity: 0;
transform: translateY(0);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(100%);
}
}
/* Support warning and motion preferences */
.warning {
display: none;
}
@supports not (animation-timeline: view(block)) {
* {
animation: none;
clip: none;
}
.warning {
position: fixed;
top: 1rem;
left: 1rem;
padding: 1rem;
border: 5px solid deeppink;
background: white;
display: block;
font-family: Arial, Helvetica, sans-serif;
}
}
@media (prefers-reduced-motion) {
* {
animation: none;
clip: none;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.