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:42:53 +09:00
parent c787d4c7ac
commit 0b9076a2fd
2 changed files with 14 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style-extra.css
+12 -8
View File
@@ -15,6 +15,7 @@ header {
will-change: transform;
background-color: transparent;
overflow: hidden;
isolation: isolate;
}
header::after {
content: '';
@@ -25,21 +26,24 @@ header::after {
pointer-events: none;
}
.header-blur {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
}
.blur-layer {
.header-blur > div {
position: absolute;
inset: 0;
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
-webkit-mask-image: var(--mask);
mask-image: var(--mask);
-webkit-mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
}
.header-blur > div:nth-child(1) { --blur: 1px; --from: 0%; --to: 20%; }
.header-blur > div:nth-child(2) { --blur: 2px; --from: 20%; --to: 40%; }
.header-blur > div:nth-child(3) { --blur: 4px; --from: 40%; --to: 60%; }
.header-blur > div:nth-child(4) { --blur: 8px; --from: 60%; --to: 80%; }
.header-blur > div:nth-child(5) { --blur: 16px; --from: 80%; --to: 100%; }
/* Fonts */
@font-face {
public/assets/js/script-extra.js
+2 -26
View File
@@ -3,35 +3,11 @@
const header = document.querySelector('header');
if (!header) return;
const LAYERS = [
{ 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');
container.className = 'header-blur';
container.setAttribute('aria-hidden', 'true');
LAYERS.forEach(cfg => {
const layer = document.createElement('div');
layer.className = 'blur-layer';
layer.style.setProperty('--blur', cfg.blur + 'px');
layer.style.setProperty(
'--mask',
`linear-gradient(to top, transparent ${cfg.from}%, black ${cfg.to}%)`
);
container.appendChild(layer);
});
header.parentNode.insertBefore(container, header);
const sync = () => { container.style.height = header.offsetHeight + 'px'; };
sync();
if ('ResizeObserver' in window) new ResizeObserver(sync).observe(header);
else window.addEventListener('resize', sync);
for (let i = 0; i < 5; i++) container.appendChild(document.createElement('div'));
header.prepend(container);
})();
/* View Transition */