通过监听页面滚动事件，结合 CSS 定位与 JavaScript 动态计算，可让 <h1> 元素在滚动过程中平滑上移并同步缩小字号，营造沉浸式视差动画效果。
通过监听页面滚动事件，结合 css 定位与 javascript 动态计算，可让 `
` 元素在滚动过程中平滑上移并同步缩小字号，营造沉浸式视差动画效果。
要实现滚动时 <h1> 文字垂直上移 + 字号渐变的双重动画效果，关键在于：
- 使用 position: fixed 配合 top 动态控制垂直位置；
- 利用 scrollY（或兼容性写法）计算滚动进度，映射为 top 偏移量和 font-size 值；
- 保持元素居中定位逻辑不被破坏，避免抖动或偏移失准。
✅ 推荐实现方案（现代、稳定、可维护）
HTML 结构优化（添加 ID 并精简容器）：
<div class="container"> <h1 id="animated-title">NBA</h1> </div> <!-- 确保页面有足够高度以触发滚动 --> <div style="height: 200vh; background: #000;"></div>
CSS（关键：固定定位 + 居中 + 无默认干扰）：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
color: #18408B;
overflow-x: hidden; /* 防止横向滚动干扰 */
}
#animated-title {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 300px;
margin: 0;
font-weight: 900;
text-shadow: 0 0 20px rgba(24, 64, 139, 0.6);
z-index: 10;
}JavaScript（高性能滚动监听 + 平滑映射）：
const title = document.getElementById('animated-title');
// 使用 requestAnimationFrame 避免滚动抖动
let ticking = false;
function updateTitle() {
const scrollY = window.scrollY;
const maxScroll = document.body.scrollHeight - window.innerHeight;
// 归一化滚动比例 [0, 1]
const progress = Math.min(scrollY / maxScroll, 1);
// 垂直上移：从 50% → 20%（即向上移动 30% 容器高度）
const topOffset = 50 - progress * 30; // 单位：%
// 字号缩放：300px → 50px 线性过渡
const fontSize = 300 - progress * 250; // 300 - (1 × 250) = 50
title.style.top = `${topOffset}%`;
title.style.fontSize = `${Math.max(50, fontSize)}px`; // 安全下限
}
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
updateTitle();
ticking = false;
});
ticking = true;
}
});
// 初始化状态（防止首屏未触发）
updateTitle();⚠️ 注意事项与最佳实践
- 避免 onscroll 内联写法：如答案中 body onscroll="myFunction()" 已过时，且无法与现代模块化脚本共存；推荐 addEventListener。
- 不要混用 scrollTop 与 scrollHeight 的旧式写法：document.body.scrollTop 在标准模式下常为 0，应统一使用 window.scrollY（MDN 兼容性良好）。
- 防抖与性能：直接在 scroll 中执行样式修改会导致重排重绘卡顿，务必用 requestAnimationFrame 节流。
- 响应式兜底：若需适配移动端，建议配合 window.matchMedia 监听 prefers-reduced-motion，对动画做降级处理。
? 总结
该效果本质是将滚动距离映射为两个视觉属性的线性插值：top 控制纵向位移，font-size 控制缩放。只要保证定位方式稳定（fixed + transform 居中）、计算逻辑归一化、更新时机受控（RAF），即可实现丝滑、跨浏览器兼容的滚动驱动动画。后续还可拓展加入 opacity 淡出、filter: blur() 虚化等增强层次感。
