react-rellax-wrapper
Version:
A react wrapper around the Rellax javascript library. Rellax -> https://dixonandmoe.com/rellax/
69 lines (68 loc) • 2.08 kB
TypeScript
import React, { FC } from 'react';
interface RellaxWrapperProps {
style?: React.CSSProperties;
className?: string;
zIndex?: number;
/**
* Centered parallax elements in your viewport. 0.5 is centered.
*/
percentage?: number;
/**
* Specify different speeds for xs devices
*/
xs?: number;
/**
* Specify different speeds for mobile devices. Default breakpoint is 576.
*/
mobile?: number;
/**
* Specify different speeds for tablets. Default breakpoint is 768.
*/
tablet?: number;
/**
* Specify different speeds for desktop devices. Default breakpoint is 1201.
*/
desktop?: number;
/**
* Will run on every animation event
* @param positions Object with x and y positions of the rellax element
*/
callback?(positions: {
x: number;
y: number;
}): void;
/**
* Enable the ability to center parallax elements in your viewport
*/
center?: boolean;
/**
* Enable horizontal parallax. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically
*/
horizontal?: boolean;
/**
* Allow decimal pixel values
*/
round?: boolean;
/**
* A negative value will make it move slower than regular scrolling, and a positive value will make it move faster
*/
speed?: number;
/**
* Enable vertical parallax
*/
vertical?: boolean;
/**
* By default, the position of parallax elements is determined via the scroll position of the body. Passing in the wrapper property will tell Rellax to watch that element instead
*/
wrapper?: string | HTMLElement;
/**
* Do we want rellax element to be relative to the mentioned wrapper.
*/
relativeToWrapper?: boolean;
/**
* Each breakpoint value represents the resolution for mobile, tablet, desktop respectively.
*/
breakpoints?: [number, number, number];
}
declare const RellaxWrapper: FC<RellaxWrapperProps>;
export default RellaxWrapper;