This commit is contained in:
2026-04-25 18:55:25 +09:00
parent 867a7c7ef6
commit 6cf88c2ffe
2 changed files with 6 additions and 21 deletions
+5 -20
View File
@@ -39,26 +39,11 @@ header::after {
-webkit-mask-image: linear-gradient(to top, transparent var(--from), black var(--to)); -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)); mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
} }
.header-blur > div:nth-child(1) { --blur: 0.0px; --from: 0%; --to: 2%; } .header-blur > div:nth-child(1) { --blur: 1px; --from: 0%; --to: 20%; }
.header-blur > div:nth-child(2) { --blur: 0.0px; --from: 2%; --to: 4%; } .header-blur > div:nth-child(2) { --blur: 2px; --from: 20%; --to: 40%; }
.header-blur > div:nth-child(3) { --blur: 0.0px; --from: 4%; --to: 6%; } .header-blur > div:nth-child(3) { --blur: 4px; --from: 40%; --to: 60%; }
.header-blur > div:nth-child(4) { --blur: 0.01px; --from: 6%; --to: 8%; } .header-blur > div:nth-child(4) { --blur: 8px; --from: 60%; --to: 80%; }
.header-blur > div:nth-child(5) { --blur: 0.02px; --from: 8%; --to: 10%; } .header-blur > div:nth-child(5) { --blur: 16px; --from: 80%; --to: 100%; }
.header-blur > div:nth-child(6) { --blur: 0.04px; --from: 10%; --to: 12%; }
.header-blur > div:nth-child(7) { --blur: 0.06px; --from: 12%; --to: 14%; }
.header-blur > div:nth-child(8) { --blur: 0.1px; --from: 14%; --to: 16%; }
.header-blur > div:nth-child(9) { --blur: 0.15px; --from: 16%; --to: 18%; }
.header-blur > div:nth-child(10) { --blur: 0.21px; --from: 18%; --to: 20%; }
.header-blur > div:nth-child(11) { --blur: 0.29px; --from: 20%; --to: 22%; }
.header-blur > div:nth-child(12) { --blur: 0.39px; --from: 22%; --to: 24%; }
.header-blur > div:nth-child(13) { --blur: 0.5px; --from: 24%; --to: 26%; }
.header-blur > div:nth-child(14) { --blur: 0.64px; --from: 26%; --to: 28%; }
.header-blur > div:nth-child(15) { --blur: 0.8px; --from: 28%; --to: 30%; }
.header-blur > div:nth-child(16) { --blur: 0.98px; --from: 30%; --to: 32%; }
.header-blur > div:nth-child(17) { --blur: 1.19px; --from: 32%; --to: 34%; }
.header-blur > div:nth-child(18) { --blur: 1.43px; --from: 34%; --to: 36%; }
.header-blur > div:nth-child(19) { --blur: 1.7px; --from: 36%; --to: 38%; }
.header-blur > div:nth-child(20) { --blur: 2.0px; --from: 38%; --to: 40%; }
/* Fonts */ /* Fonts */
@font-face { @font-face {
+1 -1
View File
@@ -6,7 +6,7 @@ function initProgressiveHeaderBlur() {
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 < 20; i++) container.appendChild(document.createElement('div')); for (let i = 0; i < 5; i++) container.appendChild(document.createElement('div'));
header.prepend(container); header.prepend(container);
} }
initProgressiveHeaderBlur(); initProgressiveHeaderBlur();