鼠标视觉差

移动鼠标感受图层叠加效果

👆 在这个区域内移动鼠标查看效果

鼠标移动视觉差

这是基于鼠标位置的图层叠加视觉差效果。不同的图层根据鼠标移动以不同的速度和方向移动，创造出深度感和立体感。

背景层

data-depth="0.1"

移动最慢，营造远景效果

中间层

data-depth="0.3-0.5"

中等速度，主要内容层

前景层

data-depth="0.8-0.9"

移动最快，营造近景效果

卡片悬浮效果

轻量级

Parallax.js 使用原生 JavaScript，无需任何依赖。

移动端支持

在移动设备上使用陀螺仪传感器创造相同效果。

灵活配置

通过 data-depth 属性轻松控制每层的移动幅度。

平滑动画

使用 CSS3 transforms 和流畅的缓动效果。

如何使用

<!-- 1. 创建场景容器 -->
<div class="parallax-scene">

  <!-- 2. 每个图层都是场景的直接子元素 -->
  <!-- data-depth 控制移动幅度（0-1，值越大移动越快） -->

  <!-- 背景层（慢） -->
  <div data-depth="0.2">
    <div class="bg-blue-500"></div>
  </div>

  <!-- 中间层 -->
  <div data-depth="0.5">
    <h1>主要内容</h1>
  </div>

  <!-- 前景层（快） -->
  <div data-depth="0.8">
    <div class="decoration"></div>
  </div>

</div>

Depth 值指南

0.1-0.2: 远景/背景
0.3-0.5: 主要内容
0.6-0.8: 前景装饰
0.9-1.0: 最前层

设计技巧

• 背景使用低饱和度颜色
• 前景使用高对比度元素
• 保持层次清晰
• 避免过度叠加

准备好了吗？

在你的页面中添加 class="parallax-scene" 容器和 data-depth 属性即可

返回首页