useParallax
A React Hook that create a parallax effect.
Demo
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const parallax = useParallax(elementTarget, options)
ElementTarget
ElementTarget is a union type that represents various kinds of elements that can be targeted.
See ElementTarget or ElementTarget Types for more details.
Options
export type UseParallaxOptions = {
/**
* Adjust the tilt value from mouse sensor
*/
mouseTiltAdjust?: (i: number) => number
/**
* Adjust the roll value from mouse sensor
*/
mouseRollAdjust?: (i: number) => number
}
Returns
Retuerns contain Pausable instance that can be paused, resumed.
See Pausable for more details.
export interface UseParallaxReturns extends Pausable {
/**
* Roll value. Scaled to `-0.5 ~ 0.5`
*/
roll: number
/**
* Tilt value. Scaled to `-0.5 ~ 0.5`
*/
tilt: number
/**
* Container style presets
*/
containerStyle: (perspective?: number) => React.CSSProperties
/**
* Element style presets
*/
elementStyle: (rotateRatio?: number, duration?: number) => React.CSSProperties
}
