视差滚动 Image Parallax Scroll

通过 background-attachment: fixed 或 transform 实现图片滚动视差效果。

实时预览

滚动此区域查看视差效果

代码

css

.parallax-container {
  height: 400px; overflow-y: auto;
  perspective: 1px;
}
.parallax-img {
  height: 300px;
  background: url('image.jpg') center/cover;
  transform: translateZ(-1px) scale(2);
  will-change: transform;
}
/* 简化方案: 使用 background-attachment */
.parallax-simple {
  background: url('image.jpg') center/cover;
  background-attachment: fixed;
  height: 300px;
}

html

<div class="parallax-container">
  <div class="parallax-img"></div>
  <div class="content">...</div>
</div>

纯 CSS 实现的视差滚动图片动画——通过滤镜、变换和遮罩让图片在悬停或滚动时产生视觉效果。适用于商品图、相册、文章插图等场景。

快速使用

复制 CSS 代码到你的样式文件中
在图片外层包裹一个带 overflow: hidden 的容器
给图片添加对应的 class 名称
调整缩放比例、模糊半径等参数

使用场景

商品图/相册：悬停缩放让用户看清细节，模糊切换增加浏览趣味
文章插图：视差滚动让图片和文字有不同的滚动层次
用户头像：灰度到彩色的过渡展示在线/离线状态或会员身份
卡片封面图：遮罩揭示或倾斜让静态封面有动态交互感

常见问题

Q: 图片缩放动画会影响图片清晰度吗？ A: transform: scale() 在合成层执行，图片先以原始分辨率渲染再缩放——放大时可能出现轻微模糊。建议初始加载比容器稍大的图片，缩放时只做缩小操作。或者用 image-rendering 优化。

Q: 如何让图片懒加载配合动画？ A: 使用 loading="lazy" 原生懒加载。图片加载完成前可以用 CSS 骨架屏或模糊占位（filter: blur(20px)），加载完成后添加 .loaded 类触发 blur→0 过渡。

Q: 滤镜动画（grayscale/blur）的性能如何？ A: filter 由 GPU 处理，性能较好。但 blur() 半径越大，GPU 开销越大。建议 blur 半径不超过 20px，并且在动画完成后移除/简化 filter。IE 不支持 filter，需降级。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持（注意 filter 性能）
移动端浏览器	✅ 完全支持
IE 11	❌ filter 和高级 transform 不支持

使用说明

属性	说明
`background-attachment: fixed`	简易视差方案，背景固定
`perspective` + `translateZ`	真正的 3D 视差方案
`will-change: transform`	性能优化提示
`overflow-y: auto`	容器需要可滚动

视差滚动 Image Parallax Scroll ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐