gch3n/val-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: progressive enhancement - content visible before JS loads
All checks were successful
Deploy / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Chen Gu
2026-04-24 01:26:01 +08:00
parent 88474e9ccc
commit b06546c674
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
themes/dreamscape/assets/css/dreamscape.css
View File

@@ -303,16 +303,19 @@ main {
.article-body p { .article-body p {
margin-bottom: 1.8rem; margin-bottom: 1.8rem;
text-align: justify; text-align: justify;
}
.js-ready .article-body p {
opacity: 0; opacity: 0;
animation: fadeInUp 0.8s ease forwards; animation: fadeInUp 0.8s ease forwards;
} }
.article-body p:nth-child(1) { animation-delay: 0.1s; } .js-ready .article-body p:nth-child(1) { animation-delay: 0.1s; }
.article-body p:nth-child(2) { animation-delay: 0.2s; } .js-ready .article-body p:nth-child(2) { animation-delay: 0.2s; }
.article-body p:nth-child(3) { animation-delay: 0.3s; } .js-ready .article-body p:nth-child(3) { animation-delay: 0.3s; }
.article-body p:nth-child(4) { animation-delay: 0.4s; } .js-ready .article-body p:nth-child(4) { animation-delay: 0.4s; }
.article-body p:nth-child(5) { animation-delay: 0.5s; } .js-ready .article-body p:nth-child(5) { animation-delay: 0.5s; }
.article-body p:nth-child(n+6) { animation-delay: 0.6s; } .js-ready .article-body p:nth-child(n+6) { animation-delay: 0.6s; }
.article-body h2 { .article-body h2 {
font-size: 1.5rem; font-size: 1.5rem;
@@ -478,12 +481,17 @@ main {
} }
.reveal { .reveal {
opacity: 0; opacity: 1;
transform: translateY(30px); transform: none;
transition: opacity 0.8s ease, transform 0.8s ease; transition: opacity 0.8s ease, transform 0.8s ease;
} }
.reveal.visible { .js-ready .reveal {
opacity: 0;
transform: translateY(30px);
}
.js-ready .reveal.visible {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }

1
themes/dreamscape/assets/js/dreamscape.js
View File

@@ -141,6 +141,7 @@
}); });
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
document.body.classList.add('js-ready');
init(); init();
setupReveal(); setupReveal();
setupParallax(); setupParallax();