react-parallax-map
React component with TypeScript for making parallax effect in React with using parallax maps
Demo react-parallax-map
How to install
npm i react-parallax-map --save
How to import
For TypeScript usage there is a index.d.ts in node_modules folder
;
or
var ParallaxMap = ;
How to use
//Creating a map for layerlet layerData = start: 0 end: 1000 beginX: 0 beginY: 0 x: 0 y: -400 radius: 500 direction: true angle: -100 step: 015 start: 1000 end: 2500 beginX: -537 beginY: -682 x: -2000 y: -700 radius: 500 direction: false angle: -280 step: 015 ; <UIParalaxMap = = ="test-layer-bg" = />
Specification
map
: ParallaxRange[] - map for layer;currentScroll
: number - current window scrollTop position;layerClassName
?: string - other class name for layer;layerZIndex
?: number - current layer's z-index position;
ParallaxRange
start
: number - scroll top position when the range must be startend
: number - scroll top position when the range must be finish,beginX
: number - coordinate X start,beginY
: number - coordinate Y start,x
: number - destination coordinate X,y
: number - destination coordinate Y,radius?
: number - radius of turning to the next range,angle?
: number - angle of the radius,direction?
: boolean - direction of the radius,step?
: number - drawing step ratio,
For development
just use:
$ yarn or $ npm i
$ yarn dev
or
$ npm run dev
open your browser http://localhost:3000
For Build
$ yarn production
or
$npm run production