mirror of
https://github.com/Xevion/v2.xevion.dev.git
synced 2025-12-07 18:08:49 -06:00
278bdae356
The header is now moved up and outside of the body container, now allowing the header to take up a max of 100% of the viewport width. With overflow set to hidden, the animation will go outside the viewport but won't create a scrollbar anymore.
64 lines
1.3 KiB
SCSS
64 lines
1.3 KiB
SCSS
|
|
header {
|
|
max-width: 100vw;
|
|
.stack {
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.stack span {
|
|
font-weight: bold;
|
|
grid-row-start: 1;
|
|
grid-column-start: 1;
|
|
font-size: 4rem;
|
|
--stack-height: calc(100% / var(--stacks) - 1px);
|
|
--inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
|
|
--clip-top: calc(var(--stack-height) * var(--index));
|
|
--clip-bottom: calc(var(--stack-height) * var(--inverse-index));
|
|
clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
|
|
animation: stack 340ms cubic-bezier(.46, .29, 0, 1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
|
|
}
|
|
|
|
.stack span:nth-child(odd) {
|
|
--glitch-translate: 8px;
|
|
}
|
|
|
|
.stack span:nth-child(even) {
|
|
--glitch-translate: -8px;
|
|
}
|
|
|
|
@keyframes stack {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-50%);
|
|
text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
|
|
}
|
|
60% {
|
|
opacity: 0.5;
|
|
transform: translateX(50%);
|
|
}
|
|
80% {
|
|
transform: none;
|
|
opacity: 1;
|
|
text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
|
|
}
|
|
100% {
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% {
|
|
text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
|
|
transform: translate(var(--glitch-translate));
|
|
}
|
|
2% {
|
|
text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
|
|
}
|
|
4%, 100% {
|
|
text-shadow: none;
|
|
transform: none;
|
|
}
|
|
} |