Fqzlrのblog

两种布局，两种性格#

全屏壁纸模式下提供 classic 与 hero 两种布局，靠 <html> 上的 dataset 切换：

1
<html data-wallpaper-mode="fullscreen" data-fullscreen-layout="classic|hero">

首帧落位：防闪烁是第一优先级#

壁纸模式与布局都支持访客切换（存 localStorage），如果等 JS 加载后再应用，访客每次进来都会先看到默认布局再「跳」到自己的偏好。解法是把读取逻辑内联进首帧：

1
// Layout.astro <script is:inline>
2
const stored = localStorage.getItem('wallpaper-fullscreen-layout');
3
const fullscreenLayout = stored === 'hero' || stored === 'classic'
4
  ? stored
5
  : defaultFullscreenLayout; // 站点配置的默认值
6
document.documentElement.dataset.fullscreenLayout = fullscreenLayout;

define:vars 把站点默认值注入内联脚本，<html> 在渲染任何内容前就带着正确的 dataset——所有布局差异都由 CSS 选择器驱动，不存在布局跳变。

classic：揭幕式#

首页首屏被壁纸整屏占据（#main-layout 用 top: 100lvh 推下去），首屏只看到一个下滑箭头。滚过 100px 阈值后 body[data-banner-reveal] 点亮，水波纹和底部渐变淡入、箭头淡出——「揭幕」的仪式感。

hero：视差标题#

壁纸 fixed 铺满、内容滚动其上，标题文案做视差：滚动时文案 translateY(-scrollY) 上移，滚过 50% 视口完全淡出。

两个实现细节：

1. rAF 节流：scroll 事件只置标记，实际写入在 rAF 里做，一次滚动只算一次布局；
2. 记忆化写入：首页文案与上下文文案同步处理（后者保留 translate(-50%,-50%) 居中前缀），值没变的帧直接跳过，避免逐帧重复写合成层属性。

标题文案的排版细节#

• 标题 clamp() 响应式：首页 clamp(2.5rem, 5rem, 5rem)（移动端 2.75rem），非首页降为 clamp(2rem, 4vw, 3rem)；
• 白字 + text-shadow: 0 2px 12px rgba(0,0,0,0.48)，在任何壁纸上保证对比度；
• 副标题打字机：data-subtitle-state="typing" 驱动伪元素光标，速度/停顿/循环全部配置化；
• 非首页描述是「引言框」：半透明暗底圆角 + 首尾引号图标，与参考站 Firefly 的样式对齐；
• 底部渐变 linear-gradient(to bottom, transparent, var(--page-bg))，高度 clamp(4rem, 12vh, 10rem)，让壁纸到正文有柔和过渡。

比参考站多做的一步#

Firefly 的全屏壁纸只有一种形态；这里把 classic / hero 做成了访客可切换的布局，配套切换时的柔和淡出过渡（避免壁纸形态硬切），站点默认值则由 wallpaperMode.fullscreen.layout 配置。

小结#

全屏壁纸的两种性格：classic 靠「揭示」讲故事，hero 靠「常驻」撑氛围。实现上记住三件事：首帧内联落位防闪烁、壁纸 z-index 别用负数、视差写入要节流加记忆化。