react-skrollr

React Skrollr

React Component parallax scrolling JavaScript library base on Skrollr

See live demo

Getting Started

$ npm install --save react-skrollr

Import package

import { ParallaxProvider, Parallax } from 'react-skrollr'

Init config (Optional)

Use init config via props init (props type is object)

Skrollr init Options

Add <ProviderParallax> in to root app

class App extends React.Component {
  render() {
    return (
      <ParallaxProvider
        init={{
          smoothScrollingDuration: 500,
          smoothScrolling: true,
          forceHeight: false
        }}
      >
      ...
      </ParallaxProvider>
    )
  }
}

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

  class App extends React.Component {
    render() {
      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!