xevion/v2.xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/v2.xevion.dev.git synced 2025-12-07 07:16:54 -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

5
_config.yml
View File

@@ -19,6 +19,7 @@ exclude:
- LICENSE - LICENSE
sass: sass:
style: compressed style: compressed
sourcemap: development
compress_html: compress_html:
ignore: ignore:
envs: ["development"] envs: ["development"]
@@ -29,6 +30,4 @@ defaults:
scope: scope:
path: "_pages" path: "_pages"
values: values:
permalink: "/:title:output_ext" permalink: "/:title:output_ext"
sass:
sourcemap: development

18
_layouts/base.html
View File

@@ -53,6 +53,24 @@ layout: compress
{% endif %} {% endif %}
</head> </head>
<body class="{% if page.wide or layout.wide %}wide{% endif %}"> <body class="{% if page.wide or layout.wide %}wide{% endif %}">
{{ content }} {{ content }}
</body> </body>
<script type="text/javascript">
// Is all of this too much effort to make the animation play in just the right way?
window.onbeforeunload = function(){
// Remember the origin so it can be checked for page reloadss
sessionStorage.setItem("origin", window.location.href);
}
window.onload = function() {
// Display the glitch effect on new page loads or reloads.
let glitch_seen = sessionStorage.getItem('glitch')
if (glitch_seen !== 'true' || window.location.href === sessionStorage.getItem("origin")) {
sessionStorage.setItem('glitch', 'true')
document.getElementById('header').firstElementChild.classList.add('glitch')
}
}
</script>
</html> </html>

65
_sass/glitch.scss
View File

@@ -1,36 +1,44 @@
header { header {
max-width: 100vw; max-width: 100%;
line-height: 1; width: 100%;
.stack { .stack {
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: 1fr; 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 { @keyframes glitch {
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% { 0% {
opacity: 0; opacity: 0;
transform: translateX(-50%); transform: translateX(-50%);
@@ -50,7 +58,7 @@ header {
} }
} }
@keyframes glitch { @keyframes jitter {
0% { 0% {
text-shadow: -2px 3px 0 red, 2px -3px 0 blue; text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
transform: translate(var(--glitch-translate)); transform: translate(var(--glitch-translate));
@@ -58,8 +66,9 @@ header {
2% { 2% {
text-shadow: 2px -3px 0 red, -2px 3px 0 blue; text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
} }
4%, 100% { 4%,
100% {
text-shadow: none; text-shadow: none;
transform: none; transform: none;
} }
} }