rallax-component

1.0.1 • Public • Published

rallax-component

a parallax scrolling component inspired by rallax.js

NPM JavaScript Style Guide

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

Readme

Keywords

none

Package Sidebar

Install

npm i rallax-component

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

34.5 kB

Total Files

6

Last publish

Collaborators

  • huangteng