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:35:30 +09:00
parent 45f9dd9b9b
commit c787d4c7ac
2 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style-extra.css
+4 -3
View File
@@ -32,12 +32,13 @@ header::after {
z-index: 9; z-index: 9;
pointer-events: none; pointer-events: none;
} }
.blur-strip { .blur-layer {
position: absolute; position: absolute;
left: 0; inset: 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
+18 -15
View File
@@ -3,29 +3,32 @@
const header = document.querySelector('header'); const header = document.querySelector('header');
if (!header) return; if (!header) return;
const STRIPS = 24; const LAYERS = [
const MAX_BLUR = 16; { blur: 1, from: 0, to: 15 },
{ blur: 3, from: 15, to: 35 },
{ blur: 6, from: 35, to: 55 },
{ blur: 10, from: 55, to: 75 },
{ blur: 16, from: 75, to: 95 },
];
const container = document.createElement('div'); const container = document.createElement('div');
container.className = 'header-blur'; container.className = 'header-blur';
container.setAttribute('aria-hidden', 'true'); container.setAttribute('aria-hidden', 'true');
for (let i = 0; i < STRIPS; i++) { LAYERS.forEach(cfg => {
const strength = 1 - i / (STRIPS - 1); const layer = document.createElement('div');
const blur = MAX_BLUR * Math.pow(strength, 1.6); layer.className = 'blur-layer';
const strip = document.createElement('div'); layer.style.setProperty('--blur', cfg.blur + 'px');
strip.className = 'blur-strip'; layer.style.setProperty(
strip.style.setProperty('--blur', blur.toFixed(2) + 'px'); '--mask',
strip.style.top = (i * 100 / STRIPS) + '%'; `linear-gradient(to top, transparent ${cfg.from}%, black ${cfg.to}%)`
strip.style.height = (100 / STRIPS) + '%'; );
container.appendChild(strip); container.appendChild(layer);
} });
header.parentNode.insertBefore(container, header); header.parentNode.insertBefore(container, header);
const sync = () => { const sync = () => { container.style.height = header.offsetHeight + 'px'; };
container.style.height = header.getBoundingClientRect().height + 'px';
};
sync(); sync();
if ('ResizeObserver' in window) new ResizeObserver(sync).observe(header); if ('ResizeObserver' in window) new ResizeObserver(sync).observe(header);
else window.addEventListener('resize', sync); else window.addEventListener('resize', sync);