Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-08 17:16:25 +01:00
Code Issues Projects Releases Packages Wiki Activity

Another scroll-driven initiative

Browse source
This commit is contained in:
Lim Chee Aun 2023-11-02 17:39:42 +08:00
parent 131b91e2c1
commit 05ab42684b
1 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/account-info.css
View file

@ -433,6 +433,16 @@
filter: blur(16px) opacity(0.2); filter: blur(16px) opacity(0.2);
} }
} }
@keyframes surface-header {
0% {
border-bottom-color: transparent;
box-shadow: none;
}
100% {
border-bottom-color: var(--outline-color);
box-shadow: 0 8px 16px -8px var(--drop-shadow-color);
}
}
@keyframes shrink-avatar { @keyframes shrink-avatar {
0% { 0% {
width: 64px; width: 64px;
@ -489,6 +499,18 @@
animation-range: contain 100% cover 100%; animation-range: contain 100% cover 100%;
} }
header {
background-image: linear-gradient(
to bottom,
transparent 30%,
var(--bg-color) var(--banner-overlap)
);
border-bottom: 1px solid transparent;
animation: surface-header 1s linear both;
animation-timeline: --account-scroll;
animation-range: 0 150px;
}
header .avatar { header .avatar {
animation: shrink-avatar 1s linear both; animation: shrink-avatar 1s linear both;
animation-timeline: --account-scroll; animation-timeline: --account-scroll;