React RAF Parallax

A tiny React component that uses requestAnimationFrame to do Parallax-style CSS transforms

Installation

npm install react-raf-parallax --save

Usage

import React from "react"
import Parallax from "react-raf-parallax";
 
class MyApp extends React.Component {
  render() {
    return <Parallax x={false} y={true}
                    perspective="100"
                    relativeToParent={true}> // <-- default props
 
      <p className="parallax" data-parallax-depth="0">
        Use data-parallax-depth attribute to specify distance
      </p>
      <h2 className="parallax" data-parallax-depth="10">Further back</h2>
      <h2 className="parallax" data-parallax-depth="20">Even further</h2>
      <h2 className="parallax" data-parallax-depth="-15">Up front</h2>
      <div>
        <h3 className="parallax" data-parallax-depth="30">Even works on nested elements</h3>
      </div>
 
      <p className="parallax"
         data-parallax-depth="10"
         data-parallax-offset-y="100"
         data-parallax-offset-x="200">
        Use data-parallax-offset-x and data-parallax-offset-y to specify
        px offsets for elements.
      </p>
    </Parallax>
  }
}

Notes

Note that this is still rapidly changing (with plenty of breaking changes), so check the README for usage updates

Not tested with complex props/state changes, but you're welcome to try.

Also, please note that you probably shouldn't use to many instances of the Parallax component as I haven't optimized it for performance (i.e. multiple rAF loops will make your browser sad)

Tests

npm test

..I should write some tests... *stares off into distance

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Release History

• 0.0.4 Selects with getElementsByClassName for performance reasons, and other performance improvements
• 0.0.3 Now only acts on elements inside the Parallax component
• 0.0.2 Changed data attribute from data-depth to data-parallax-depth for safer namespace; added support for per element offsets
• 0.0.1 Initial release