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:
@@ -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>
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user