xevion/v2.xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/v2.xevion.dev.git synced 2025-12-11 08:09:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactor glitch header SCSS, modify animation logic w/ sessionStorage

Browse Source 
Also fix Sass plugin configuration, re-enable CSS compression
This commit is contained in:
Xevion
2022-09-20 23:48:10 -05:00
parent 31bda0f788
commit 43104a3d0e
3 changed files with 57 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
_sass/glitch.scss
View File

@@ -1,36 +1,44 @@
header {
max-width: 100vw;
line-height: 1;
max-width: 100%;
width: 100%;
.stack {
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
&.glitch span {
animation: glitch 340ms cubic-bezier(0.46, 0.29, 0, 1.24) 1 backwards calc(var(--index) * 120ms),
jitter 2000ms ease infinite 2s alternate-reverse;
}
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: jitter 2000ms ease infinite 2s alternate-reverse;
&:nth-child(odd) {
--glitch-translate: 8px;
}
&:nth-child(even) {
--glitch-translate: -8px;
}
}
}
}
.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 {
@keyframes glitch {
0% {
opacity: 0;
transform: translateX(-50%);
@@ -50,7 +58,7 @@ header {
}
}
@keyframes glitch {
@keyframes jitter {
0% {
text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
transform: translate(var(--glitch-translate));
@@ -58,8 +66,9 @@ header {
2% {
text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
}
4%, 100% {
4%,
100% {
text-shadow: none;
transform: none;
}
}
}