nercone-dev/website
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Activity

--

Browse Source
This commit is contained in:
nercone
2026-04-24 23:14:22 +09:00
parent ebbf92e8f6
commit 74dc2e5ac2
3 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style-extra.css
+27
View File
@@ -133,3 +133,30 @@ header::after {
background: #FFFFFF40; background: #FFFFFF40;
transform: translate(0, 0); transform: translate(0, 0);
} }
/* Loading Overlay */
#loading-overlay {
view-transition-name: none;
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-dark-grey);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
pointer-events: none;
opacity: 1;
}
#loading-overlay svg {
width: 50vmin;
height: 50vmin;
opacity: 0;
filter: blur(20px);
transform: scale(1);
will-change: opacity, filter, transform;
}
#loading-overlay polyline {
will-change: stroke-dashoffset;
}
public/assets/js/script-extra.js
+48
View File
@@ -303,3 +303,51 @@
init(); init();
} }
})(); })();
/* Loading Animation */
(() => {
const overlay = document.getElementById('loading-overlay');
if (!overlay) return;
const svg = overlay.querySelector('svg');
const line = overlay.querySelector('polyline');
if (!svg || !line) { overlay.remove(); return; }
const length = line.getTotalLength();
line.style.strokeDasharray = length;
line.style.strokeDashoffset = length;
const ease = 'cubic-bezier(0.22, 1, 0.36, 1)';
const PHASE_IN = 3000;
const PHASE_WAIT = 1000;
const PHASE_OUT = 1000;
const opts = (d) => ({ duration: d, easing: ease, fill: 'forwards' });
svg.animate([
{ opacity: 0, transform: 'scale(1)', filter: 'blur(20px)' },
{ opacity: 1, transform: 'scale(0.5)', filter: 'blur(0px)' }
], opts(PHASE_IN));
line.animate([
{ strokeDashoffset: length },
{ strokeDashoffset: 0 }
], opts(PHASE_IN));
setTimeout(() => {
svg.animate([
{ opacity: 1, transform: 'scale(0.5)', filter: 'blur(0px)' },
{ opacity: 0, transform: 'scale(0.75)', filter: 'blur(20px)' }
], opts(PHASE_OUT));
line.animate([
{ strokeDashoffset: 0 },
{ strokeDashoffset: length }
], opts(PHASE_OUT));
overlay.animate([
{ opacity: 1, backdropFilter: 'blur(40px)', WebkitBackdropFilter: 'blur(40px)' },
{ opacity: 0, backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)' }
], opts(PHASE_OUT));
setTimeout(() => overlay.remove(), PHASE_OUT);
}, PHASE_IN + PHASE_WAIT);
})();
public/base.html
+5
View File
@@ -56,6 +56,11 @@
{% block custom_body %} {% block custom_body %}
<body> <body>
<div id="cursor"></div> <div id="cursor"></div>
<div id="loading-overlay" aria-hidden="true">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<polyline points="872 572.75 152 332 152 692 512 692 872 332 872 692 684.5 692" fill="none" stroke="#fff" stroke-width="48" stroke-miterlimit="10"/>
</svg>
</div>
{% block custom_header %} {% block custom_header %}
<header class="flex"> <header class="flex">
<div class="flex-1 flex"> <div class="flex-1 flex">