rallax-component
a parallax scrolling component inspired by rallax.js
Last updated 2 years ago by huangteng .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rallax-component 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.0.1                                ...           latest (2 years ago)

2 Versions

  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |