76 lines
1.3 KiB
CSS
76 lines
1.3 KiB
CSS
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
@supports (animation-timeline: scroll()) and (animation-range: 0 50vh) {
|
||
|
|
@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: var(--motto-background);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
background-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
main,
|
||
|
|
footer {
|
||
|
|
position: relative;
|
||
|
|
top: 55vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.motto {
|
||
|
|
position: fixed;
|
||
|
|
top: 12rem;
|
||
|
|
|
||
|
|
animation: sticky-header linear forwards;
|
||
|
|
animation-timeline: scroll();
|
||
|
|
animation-range: 0 50vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.motto::before {
|
||
|
|
filter: blur(12px);
|
||
|
|
|
||
|
|
top: 2rem;
|
||
|
|
|
||
|
|
animation: blurry-header linear forwards;
|
||
|
|
animation-timeline: scroll();
|
||
|
|
animation-range: 0 50vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.motto-inside h1 {
|
||
|
|
animation: transparent-text-bg linear forwards;
|
||
|
|
animation-timeline: scroll();
|
||
|
|
animation-range: 0 40vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.motto {
|
||
|
|
width: calc(100% - 8rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.motto::before {
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} /* end @supports */
|
||
|
|
} /* end @media */
|