mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-29 12:48:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Scroll-driven avatar shrinking

Browse source
This commit is contained in:
Lim Chee Aun 2023-11-02 09:36:30 +08:00
parent bf7acb6eab
commit a9c3c6fdb4
1 changed files with 17 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -432,11 +432,22 @@
filter: blur(16px) opacity(0.2); filter: blur(16px) opacity(0.2);
} }
} }
@keyframes shrink-avatar {
0% {
width: 64px;
height: 64px;
}
100% {
width: 2.5em;
height: 2.5em;
}
}
.sheet .account-container { .sheet .account-container {
border-radius: 16px 16px 0 0; border-radius: 16px 16px 0 0;
overflow-x: hidden; overflow-x: hidden;
max-height: 75vh; max-height: 75vh;
overscroll-behavior: none; overscroll-behavior: none;
scroll-timeline: --account-scroll;
header { header {
padding-bottom: 16px; padding-bottom: 16px;
@ -469,6 +480,12 @@
animation-timeline: view(); animation-timeline: view();
animation-range: contain 100% cover 100%; animation-range: contain 100% cover 100%;
} }
header .avatar {
animation: shrink-avatar 1s linear both;
animation-timeline: --account-scroll;
animation-range: 0 150px;
}
} }
main { main {