全屏壁纸的两种性格：classic 揭幕与 hero 视差的实现细节

两种布局，两种性格#

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

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

	classic	hero
壁纸定位	`absolute`，随页滚动	`fixed; inset: 0`，固定整屏
首页首屏	整屏壁纸，只留下滑箭头	壁纸 + 居中标题文案
滚动后	滚过阈值揭出水波纹/渐变	文案上移淡出，壁纸常驻
非首页	变 `max(45vh, 380px)` 条带 + 上下文标题	壁纸按 `--overlay-blur` 虚化铺满

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

壁纸模式与布局都支持访客切换（存 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% 视口完全淡出。

两个实现细节：

rAF 节流：scroll 事件只置标记，实际写入在 rAF 里做，一次滚动只算一次布局；
记忆化写入：首页文案与上下文文案同步处理（后者保留 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 别用负数、视差写入要节流加记忆化。

Fqzlrのblog

两种布局，两种性格#

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

classic：揭幕式#

hero：视差标题#

标题文案的排版细节#

比参考站多做的一步#

小结#

继续阅读

换条路线

Fqzlrのblog

两种布局，两种性格#

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

classic：揭幕式#

hero：视差标题#

标题文案的排版细节#

比参考站多做的一步#

小结#

分享文章

沿着主题读

换条路线