simpleParallax.js -

当页面滚动时，让普通图片产生上下或对角线方向的视差位移，无需背景图或复杂配置。simpleParallax.js 直接作用于 <img> 标签，支持 React、Next.js 和原生 JS，安装后一行组件即可生效。

它能做什么

核心功能是将静态图片在滚动时产生方向性平移，形成视差效果。与多数依赖 background-image 的库不同，它直接操作 <img> 标签，因此兼容 next/image 组件。

• 方向控制：支持 up、down、left、right 及组合方向（如 up-left、down-right），共 8 种滚动方向
• 缩放系数：通过 scale 参数（默认 1.4，需 >1.0）控制位移幅度，系数越大动效越明显，但需按比例放大原图避免画质损失
• 溢出模式：overflow 设为 true 时图片可超出容器边界，与周围内容重叠
• 延迟与过渡：delay（秒）让图片在用户停止滚动后继续移动一段时长，配合 transition（任意 CSS transition）可自定义缓动曲线
• 大型过渡百分比：maxTransition（1-99）限制视差动画的作用范围，例如设为 40 则仅在视口 0%-40% 区间内发生位移

怎么上手

安装后通过 npm 安装 simple-parallax-js，在 React 组件中导入 SimpleParallax 包裹 <img> 即可。原生 JS 版本需手动传入图片选择器和配置项。

• 安装命令：npm install simple-parallax-js（支持 npm、yarn、bun）
• React 用法：<SimpleParallax><img src="..." alt="..." /></SimpleParallax>，无需额外 JS 逻辑
• 原生 JS 用法：new simpleParallax(images, { scale: 1.5 })，支持 refresh() 和 destroy() 方法
• 自定义容器：customContainer 参数用于图片位于独立滚动容器内的场景，默认以 body 滚动百分比计算

适合谁用

适合需要快速为产品页、博客、落地页添加视差动效的 React 或 Next.js 开发者，尤其是希望避免复杂配置或依赖 background-image 的项目。

• React / Next.js 项目：直接使用组件化 API，无需手动管理滚动事件
• 原生 JS 项目：同样支持，提供 refresh 和 destroy 方法便于动态更新
• 图片质量敏感场景：官方建议按 scale 系数等比放大原图（如 500px 图片用 750px 替代），避免缩放模糊

注意事项

scale 必须大于 1.0 才能产生视差效果；overflow 默认 false 时图片不会溢出容器；delay 单位为秒，默认 0.4s；maxTransition 需填入 1-99 的整数百分比。

• scale 下限：低于 1.0 无效，官方默认 1.4
• 性能提示：无需额外依赖，但高 scale 值需配合大图使用
• 作者：Geoffrey Signorato，项目托管于 GitHub（geosigno/simpleParallax.js）

常见问题

Q1：simpleParallax.js 能否与 next/image 一起使用？

A1：可以。官方明确说明支持 next/image 组件，直接将其作为 SimpleParallax 的子元素即可生效。

Q2：如何让图片向对角线方向移动？

A2：将 orientation 设为组合方向字符串，例如 "down right" 表示向下滚动时图片向右下角移动，"up left" 则向左上角移动。

Q3：视差效果在图片上出现溢出怎么办？

A3：默认 overflow 为 false，图片不会超出容器。若需要图片与周围内容重叠，将 overflow 设为 true，此时图片会移出自然文档流。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。