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

--

Browse Source
This commit is contained in:
nercone
2026-04-25 03:23:18 +09:00
parent f238e618ee
commit 45f9dd9b9b
2 changed files with 30 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style-extra.css
+9 -12
View File
@@ -20,27 +20,24 @@ header::after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 1; z-index: -1;
background: linear-gradient(to top, transparent, var(--color-dark-grey)); background: linear-gradient(to top, transparent, var(--color-dark-grey));
pointer-events: none; pointer-events: none;
} }
header > *:not(.header-blur) {
position: relative;
z-index: 2;
}
.header-blur { .header-blur {
position: absolute; position: fixed;
inset: 0; top: 0;
z-index: 0; left: 0;
right: 0;
z-index: 9;
pointer-events: none; pointer-events: none;
} }
.blur-layer { .blur-strip {
position: absolute; position: absolute;
inset: 0; left: 0;
right: 0;
backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
-webkit-mask-image: var(--mask);
mask-image: var(--mask);
} }
/* Fonts */ /* Fonts */
public/assets/js/script-extra.js
+21 -31
View File
@@ -3,42 +3,32 @@
const header = document.querySelector('header'); const header = document.querySelector('header');
if (!header) return; if (!header) return;
const LAYERS = 8; const STRIPS = 24;
const MAX_BLUR = 16; const MAX_BLUR = 16;
const configs = Array.from({ length: LAYERS }, (_, i) => {
const t = i / (LAYERS - 1);
const blur = MAX_BLUR * Math.pow(t, 2);
const from = (i / LAYERS) * 100;
const to = ((i + 1) / LAYERS) * 100;
const mid = (from + to) / 2;
return { blur, from, to, mid };
});
const root = document.createElement('div'); const container = document.createElement('div');
root.className = 'header-blur'; container.className = 'header-blur';
root.setAttribute('aria-hidden', 'true'); container.setAttribute('aria-hidden', 'true');
for (const cfg of configs) { for (let i = 0; i < STRIPS; i++) {
const layer = document.createElement('div'); const strength = 1 - i / (STRIPS - 1);
layer.className = 'blur-layer'; const blur = MAX_BLUR * Math.pow(strength, 1.6);
layer.style.setProperty('--blur', cfg.blur.toFixed(2) + 'px'); const strip = document.createElement('div');
const fadeHalf = (cfg.to - cfg.from); strip.className = 'blur-strip';
const a = Math.max(0, cfg.from - fadeHalf); strip.style.setProperty('--blur', blur.toFixed(2) + 'px');
const b = cfg.from; strip.style.top = (i * 100 / STRIPS) + '%';
const c = cfg.to; strip.style.height = (100 / STRIPS) + '%';
const d = Math.min(100, cfg.to + fadeHalf); container.appendChild(strip);
layer.style.setProperty(
'--mask',
`linear-gradient(to top,
transparent ${a}%,
black ${b}%,
black ${c}%,
transparent ${d}%)`
);
root.appendChild(layer);
} }
header.prepend(root); header.parentNode.insertBefore(container, header);
const sync = () => {
container.style.height = header.getBoundingClientRect().height + 'px';
};
sync();
if ('ResizeObserver' in window) new ResizeObserver(sync).observe(header);
else window.addEventListener('resize', sync);
})(); })();
/* View Transition */ /* View Transition */