useParallax
一个创建视差效果的 React 钩子。
演示
用法
请查看 API。
源码
API
const parallax = useParallax(elementTarget, options)
元素目标 ElementTarget
ElementTarget 是一个联合类型，代表可以被定位的各种元素。
更多详情，请参见 ElementTarget 或 ElementTarget 类型。
选项 Options
export type UseParallaxOptions = {
/**
* 从鼠标传感器调整倾斜值
*/
mouseTiltAdjust?: (i: number) => number
/**
* 从鼠标传感器调整滚动值
*/
mouseRollAdjust?: (i: number) => number
}
返回值
Retuerns contain Pausable instance that can be paused, resumed.
See Pausable for more details.
export interface UseParallaxReturns extends Pausable {
/**
* 滚动值。缩放到 `-0.5 ~ 0.5`
*/
roll: number
/**
* 倾斜值。缩放到 `-0.5 ~ 0.5`
*/
tilt: number
/**
* 容器样式预设
*/
containerStyle: (perspective?: number) => React.CSSProperties
/**
* 元素样式预设
*/
elementStyle: (rotateRatio?: number, duration?: number) => React.CSSProperties
}
