1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-31 02:30:13 +02:00

add scroll animation on hero img;

This commit is contained in:
Kushagra Gour
2023-08-18 12:08:41 +05:30
parent 317d803a18
commit 6ad63526c7

View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@@ -48,6 +48,7 @@
html { html {
font-size: var(--base-font-size); font-size: var(--base-font-size);
scroll-timeline: --root-scroll block;
} }
body { body {
@@ -60,6 +61,7 @@
margin: 0; margin: 0;
color: #3a3a3a; color: #3a3a3a;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
body.docs { body.docs {
max-width: 70ch; max-width: 70ch;
@@ -483,6 +485,20 @@
.people-say-bottom .say { .people-say-bottom .say {
--shadow-y: -5px; --shadow-y: -5px;
} }
@keyframes hero-img-progress {
from {
transform: rotateX(4deg) rotateY(-6deg);
}
to {
transform: rotateX(-40deg) rotateY(100deg);
}
}
.screenshot {
animation: hero-img-progress auto linear;
animation-timeline: --root-scroll;
}
</style> </style>
</head> </head>