仅添加 parallax 类名无法触发视差动画，必须配合 data-parallax 属性并引入 JS 库（如 rellax.js 或 jarallax），调用初始化函数后才生效。
用 parallax 类名触发滚动动画，但必须配合 data-parallax 属性
纯靠 CSS 类名（比如 parallax）本身不会激活视差效果——几乎所有主流 CSS 视差库（如 rellax.js、jarallax）都依赖 JS 初始化，并通过 data- 属性传递配置。只写 class="parallax" 是无效的。
实操建议：
- 引入库后，必须手动调用初始化函数，例如
new Rellax('.parallax')或jarallax(document.querySelectorAll('.parallax')) - 控制位移强度要用
data-rellax-speed（rellax）或data-jarallax-speed（jarallax），不是 CSS 里的transform - 常见错误：把
.parallax加在父容器上，结果子元素没设position: relative，导致视差层叠错乱 - 移动端默认常被禁用，rellax 需显式传
{ mobile: true }，jarallax 要加data-jarallax-mobile="true"
transform: translateZ() 不是视差，别和 CSS 3D 混淆
有人以为给元素加 transform: translateZ(50px) 就能实现视差，其实这只是 3D 变换，不随滚动变化——它不会响应 scroll 事件，也不产生深度错觉，只是静态偏移。
真正视差的核心是「滚动进度 → 位移量映射」，必须由 JS 实时读取 window.scrollY 或元素 getBoundingClientRect()，再动态改 transform: translateY()。
容易踩的坑：
- 用
CSS @keyframes + scroll-timeline尝试纯 CSS 视差？目前仅 Chrome 115+ 支持，且scroll-timeline对容器要求苛刻，兼容性极差 - 在
position: fixed元素上硬套视差类？多数库会跳过 fixed 元素，因为其脱离文档流，滚动计算失效 - 多个视差元素共用同一 class 却没区分速度，结果全挤在一起动，失去层次感——得用不同
data-*值或单独 class 控制
引入方式选 CDN 还是 npm？看是否要 SSR 或 Tree-shaking
直接 script 标签引入 CDN 最快，但无法按需导入、不能做构建优化；npm 安装适合现代打包流程，但要注意导出格式。
关键差异点：
-
rellax的 npm 包默认导出的是 UMD，需用import Rellax from 'rellax'，而它的 ESM 版本在rellax/esm下，否则 Webpack/Vite 可能打不进 chunk -
jarallax的 npm 版本自带 CSS，引入 JS 后还得手动import 'jarallax/dist/jarallax.css'，漏掉就无样式反馈 - Next.js / Nuxt 等 SSR 环境下，必须在
useEffect或onMounted里初始化，否则服务端渲染时访问window会报错 - CDN 方式（如 jsDelivr）最简：一行
<script src="https://cdn.jsdelivr.net/npm/rellax@1.12.3/rellax.min.js"></script>，但无法 tree-shake，体积多 8KB
为什么加了类名还是不动？检查这三处硬性条件
90% 的“不生效”问题出在这三个地方，和代码逻辑无关，纯配置疏漏。
- 容器没设高度：视差元素父级若高度为
0（比如只有绝对定位子元素），滚动区域实际不存在，scroll事件根本不会触发 - 元素没出现在首屏外：rellax 默认只监听进入视口的元素，如果
.parallax元素一开始就在可视区，它不会注册滚动监听——加data-rellax-percentage="0"强制启用 - CSS 重置覆盖了 transform：某些 UI 框架（如 Tailwind）的
transform工具类会干扰库的 inline transform，检查 computed style 里transform是否被 !important 锁死
复杂点在于：视差不是开个开关就行的效果，它本质是滚动监听 + 性能敏感的重绘。哪怕类名、属性、引入都对，只要父容器 layout 不稳定（比如图片加载导致高度抖动），动画就会卡顿或跳帧。这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
