nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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);
}
}
@keyframes shrink-avatar {
0% {
width: 64px;
height: 64px;
}
100% {
width: 2.5em;
height: 2.5em;
}
}
.sheet .account-container {
border-radius: 16px 16px 0 0;
overflow-x: hidden;
max-height: 75vh;
overscroll-behavior: none;
scroll-timeline: --account-scroll;
header {
padding-bottom: 16px;
@ -469,6 +480,12 @@
animation-timeline: view();
animation-range: contain 100% cover 100%;
}
header .avatar {
animation: shrink-avatar 1s linear both;
animation-timeline: --account-scroll;
animation-range: 0 150px;
}
}
main {