oreolek/phanpy
1
0
Fork 0
Code Activity

First production-stage scroll-driven animation

Browse source
This commit is contained in:
Lim Chee Aun 2023-10-31 15:43:56 +08:00
parent afb80d3dc6
commit b17977a5c7
1 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -424,6 +424,16 @@
display: none;
}
@keyframes bye-banner {
20% {
transform: translateY(0);
filter: blur(0) opacity(1);
}
100% {
transform: translateY(8px);
filter: blur(16px) opacity(0.75);
}
}
.sheet .account-container {
border-radius: 16px 16px 0 0;
overflow-x: hidden;
@ -455,6 +465,11 @@
margin-top: calc(-1 * var(--banner-overlap));
}
.header-banner:not(.header-is-avatar):not(:hover):not(:active) {
animation: bye-banner 1s linear both;
animation-timeline: scroll();
}
main {
margin-top: -8px;
padding-top: 1px;