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

3
_config.yml
View File

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

18
_layouts/base.html
View File

@@ -53,6 +53,24 @@ layout: compress
{% endif %}
</head>
<body class="{% if page.wide or layout.wide %}wide{% endif %}">
{{ content }}
</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>

37
_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;
}
}
.stack span {
&.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: 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) {
animation: jitter 2000ms ease infinite 2s alternate-reverse;
&:nth-child(odd) {
--glitch-translate: 8px;
}
}
.stack span:nth-child(even) {
&: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,7 +66,8 @@ header {
2% {
text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
}
4%, 100% {
4%,
100% {
text-shadow: none;
transform: none;
}