millironx/pages
1
0
Fork 0
Code Issues Pull requests Releases Packages Activity

feat: Add CSS-only scrolling image background

Browse source
This commit is contained in:
Thomas A. Christensen II 2024-11-20 11:46:24 -06:00
parent 64bd8ae4b3
commit 8bab0de738
Signed by: millironx
GPG key ID: B7044A3432851F64
1 changed files with 73 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
assets/styles/millironx.css
View file

@ -254,3 +254,76 @@ blockquote small {
max-width: 50%; max-width: 50%;
} }
} /* end @media */ } /* end @media */
@supports (animation-timeline: scroll()) {
@keyframes sticky-header {
from {
height: 50vh;
top: 6rem;
}
to {
height: 10vh;
top: -1rem;
}
}
@keyframes blurry-header {
from {
filter: blur(0);
}
to {
filter: blur(2px);
}
}
@keyframes transparent-text-bg {
from {
background-color: rgba(0.33, 0.33, 0.33, 0.33);
}
to {
background-color: rgba(0.33, 0.33, 0.33, 0);
}
}
main {
position: relative;
top: 55vh;
}
.motto {
position: fixed;
top: 12rem;
animation: sticky-header linear forwards;
animation-timeline: scroll();
animation-range: 0.001vh 50vh;
}
.motto::before {
filter: blur(12px);
top: 2rem;
animation: blurry-header linear forwards;
animation-timeline: scroll();
animation-range: 0.001vh 50vh;
}
.motto-inside h1 {
animation: transparent-text-bg linear forwards;
animation-timeline: scroll();
animation-range: 0.001vh 40vh;
}
@media (min-width: 768px) {
.motto {
width: calc(100% - 8rem);
}
.motto::before {
top: 0;
}
}
} /* end @supports */