React Tilt

👀 轻松为 React 组件添加悬停倾斜效果

在线演示 💥

安装

npm install react-parallax-tilt

特性

• 轻量级 2.9kB，零依赖 📦
• 可树摇 🌳 支持 ESM 和 CommonJS
• 兼容 React v15 及以上版本
• 支持 鼠标 和 触摸 事件
• 支持设备倾斜（陀螺仪）功能
• 眩光 效果 🌟 支持自定义属性（颜色、位置等）🔗演示
• 事件跟踪 组件数值 📐（倾斜角度、眩光参数、鼠标移动等）🔗演示
• 多种内置效果：
  • 悬停时 缩放 🔗演示
  • 禁用 x/y 轴 🔗演示
  • 组件 垂直/水平翻转 🔗演示
  • 窗口级 倾斜悬停效果 🔗演示
  • 手动倾斜 控制 🕹（通过操纵杆、滑块等）🔗演示
  • 叠加图片的 视差 效果 🔗演示

示例

import Tilt from 'react-parallax-tilt';

const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
        <h1>React Parallax Tilt 👀</h1>
      </div>
    </Tilt>
  );
};

属性

所有属性均为可选。
以下是所有可用属性及其默认值的完整列表：

▶︎ 表示默认值

tiltEnable：boolean ▶︎ true
启用/禁用倾斜效果。

tiltReverse：boolean ▶︎ false
反转倾斜方向。

tiltAngleXInitial：number ▶︎ 0
X 轴初始倾斜角度（以度为单位）。

tiltAngleYInitial：number ▶︎ 0
Y 轴初始倾斜角度（以度为单位）。

tiltMaxAngleX：number ▶︎ 20
X 轴最大倾斜旋转角度（以度为单位）。范围：0°-90°。

tiltMaxAngleY：number ▶︎ 20
Y 轴最大倾斜旋转角度（以度为单位）。范围：0°-90°。

tiltAxis：'x' | 'y' ▶︎ undefined
仅允许在单个轴上倾斜。

tiltAngleXManual：number | null ▶︎ null
X 轴手动倾斜旋转角度（以度为单位）。

tiltAngleYManual：number | null ▶︎ null
Y 轴手动倾斜旋转角度（以度为单位）。

glareEnable：boolean ▶︎ false
启用/禁用眩光效果。

glareMaxOpacity：number ▶︎ 0.7
最大眩光不透明度（0.5 = 50%，1 = 100%）。范围：0-1

glareColor：string ▶︎ #ffffff
设置眩光效果的颜色。

glarePosition：'top' | 'right' | 'bottom' | 'left' | 'all' ▶︎ bottom
设置眩光效果的位置。

glareReverse：boolean ▶︎ false
反转眩光方向。

glareBorderRadius：string ▶︎ 0
设置眩光的边框半径。接受任何标准 CSS 边框半径值。

scale：number ▶︎ 1
组件的缩放比例（1.5 = 150%，2 = 200%）。

perspective：number ▶︎ 1000
定义倾斜组件与用户的距离感。值越小，倾斜效果越强烈。

flipVertically：boolean ▶︎ false
启用/禁用组件的垂直翻转。

flipHorizontally：boolean ▶︎ false
启用/禁用组件的水平翻转。

reset：boolean ▶︎ true
确定在 onLeave 事件时是否重置效果。

transitionEasing：string ▶︎ cubic-bezier(.03,.98,.52,.99)
过渡的缓动函数。

transitionSpeed：number ▶︎ 400
过渡的速度。

trackOnWindow：boolean ▶︎ false
跟踪整个窗口的鼠标和触摸事件。

gyroscope：boolean ▶︎ false
启用/禁用设备方向检测。

onMove：({ tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, event: Event }) => void
当用户在组件上移动时触发的回调。

onEnter：(event: Event) => void
当用户进入组件时触发的回调。

onLeave：(event: Event) => void
当用户离开组件时触发的回调。

陀螺仪 - 设备方向

请注意，设备方向检测目前是实验性技术。
在生产环境中使用前，请查看浏览器兼容性。
使用设备方向时的重要注意事项：

• 始终使用安全源（例如 https）
• 在跨域 <iframe> 元素中使用时，可能无法在所有浏览器中正常工作

<Tilt gyroscope={true}>
  <h1>React Parallax Tilt 👀</h1>
</Tilt>

开发

轻松搭建本地开发环境！

构建项目并在 localhost 上启动 storybook：

• 克隆仓库
• npm install
• npm start

开始编码吧！ 🎉

贡献

欢迎所有贡献！
请查看贡献指南：拉取请求 | 问题