Atropos

为网页元素赋予触控友好的 3D 视差悬停效果，脚本仅 2KB（min+gzip），零依赖，同时支持鼠标与触摸屏。

核心功能与特色

Atropos 通过指针事件驱动，在鼠标或手指移动时让容器沿 X/Y 轴旋转并产生 translateZ 偏移，形成立体景深感。

• 触控友好：使用 Pointer Events，鼠标与触摸屏同一套逻辑
• 轻量级：脚本体积 2KB（min+gzip），无第三方依赖
• 可配置：支持 activeOffset（悬停时 translateZ 偏移量，默认 50）、rotateXMax/rotateYMax（最大旋转角度，默认 15°）、duration（过渡时间，默认 300ms）等参数
• 多组件联动：多个 Atropos 实例可共用同一 eventsEl 容器，通过 stretchX/stretchY（百分比平移）实现统一视角的联动效果
• 始终激活模式：设置 alwaysActive: true 可让效果持续生效，无需悬停

安装与集成方式

支持 NPM 安装、CDN 引入或直接作为 ES 模块使用，并提供多种样式格式。

• NPM 安装：npm i atropos，然后 import Atropos from 'atropos'
• 样式导入：支持 CSS、SCSS、LESS 格式，可通过 import 'atropos/css' 或 @import 'atropos/scss' 引入
• CDN 直接使用：通过 <script> 标签加载 atropos.min.js，或使用 ES 模块 import 'https://cdn.jsdelivr.net/npm/atropos@2/atropos.min.mjs'
• 框架支持：官方提供 React 组件和 WebComponent，可嵌入 Angular、Vue、Svelte、Solid 等

HTML 结构与初始化

必须使用四层嵌套容器（atropos atropos-scale atropos-rotate atropos-inner），然后通过 JavaScript 初始化。

• 容器层级：.atropos（主容器） .atropos-scale（缩放层） .atropos-rotate（旋转层） .atropos-inner（内容层）
• 初始化参数：el 为必填（HTMLElement 或 CSS 选择器），eventsEl 可选（指定指针事件目标，默认使用 el）
• 自定义尺寸：通过 CSS 设置 .my-atropos { width: 320px; height: 160px; } 等
• 触摸旋转控制：rotateTouch 可设为 'scroll-y' 或 'scroll-x' 以保留页面滚动能力

浏览器兼容性与许可

依赖 Pointer Events、CSS 3D Transforms 和 CSS Transitions，现代浏览器均支持。

• 兼容要求：支持 Pointer Events、CSS 3D Transforms、CSS Transitions
• 开源许可：MIT 协议，可自由用于商业项目
• 项目归属：由 Swiper、Framework7 等知名开源项目的作者团队维护

常见问题

Q1：Atropos 的 activeOffset 参数有什么作用？

A1：activeOffset 控制悬停时容器沿 Z 轴的偏移量（translateZ），默认值为 50，数值越大立体感越强。

Q2：Atropos 能否在触摸设备上正常滚动页面？

A2：可以。将 rotateTouch 参数设为 'scroll-y' 或 'scroll-x'，可让初始垂直/水平触摸移动不触发旋转，从而保留页面滚动能力。

Q3：Atropos 支持哪些框架？

A3：官方直接支持 JavaScript、React 和 WebComponent（WebComponent 可用于 Angular、Vue、Svelte、Solid 等框架）。

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

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