React Skrollr
React Component parallax scrolling JavaScript library base on Skrollr
See live demo
Getting Started
$ npm install --save react-skrollr
Import package
Init config (Optional)
Use init config via props init
(props type is object)
Skrollr init Options
Add ParallaxProvider
into root app
Component { return <ParallaxProvider init= smoothScrollingDuration: 500 smoothScrolling: true forceHeight: false > ... </> }
Setting parallax data (Required)
Use data scrolling via props data
(props type is object)
Skrollr Data attr document
const Component = { return <Parallax data= 'data-center-center': 'opacity: 1;' 'data-bottom-top': 'opacity: 0;' >Some content</Parallax> }
Example use
Component { return <ParallaxProvider> <Parallax data= 'data-center-center': 'opacity: 1;' 'data-bottom-top': 'opacity: 0;' > Some content or Component </Parallax> </ParallaxProvider> ; }
Thank you for your suggestions!