rallax-component

a parallax scrolling component inspired by rallax.js

Install

npm install --save rallax-component

Usage

import React, { Component } from 'react'
 
import Rallax from 'rallax-component'
 
class Example extends Component {
  render () {
    return (
      <Rallax
        options={}
        when={}
        child={}
      >
        {
          <SomeChildrenComponent />
        }
      </Rallax>
    )
  }
}

Param

options

speed

Accepts a float number.

At a speed of 0, the target will scroll like a static element. At a speed of 1, the target will appear fixed (will move at the speed of scroll). At even higher speeds, the target will move quicker than the speed of scroll.

mobilePx

Accepts an integer, as number of pixels.

Pass this option if you want parallax for this target to automatically be disabled at a certain screen width.

when

a array like this:

const whenProps = [
      {
        condition: () => window.scrollY > 750,
        action: parallax => parallax.stop()
      },
      {
        condition: () => window.scrollY < 750,
        action: parallax => parallax.start()
      }
    ]

the property of the when param must be 'condition' or 'action',and it's a function.

child

bool, if true, the rallax will bind with the child node.

Refrence

rallax.js

License

MIT © cbbfcd