d3vhound/react-atv-parallax

Apple TV Parallax Effect for React

react-atv-parallax

Port of @drewwilson’s atvImg for React. It supports both touch and mouse events, and uses ReactDOM for layers. Example was assembled from Designmodo.

Install

npm install --save react-atv-parallax

Demo

http://danielsinclair.github.io/react-atv-parallax/

Or run it locally:

git clone https://github.com/DanielSinclair/react-atv-parallax
cd react-atv-parallax
npm install
npm run dev

Then navigate to http://localhost:3000/

API

Props

static propTypes = {
  isStatic: PropTypes.bool,
  style: PropTypes.object,
  children: PropTypes.node
};

isStatic: Optional. A boolean value. When it evaluates to true, it disables the parallax effect, and shows the flattened component. style: Optional. Set up the width/height of the entire component. children: Required. Equates the child dom elements as layers. Ordered: background to foreground.

Example

import ATVParallax from 'react-atv-parallax';

<ATVParallax style={{ width: 320, height: 190 }}>
  <img src='img/1.png'/>
  <img src='img/2.png'/>
  <div style={{ ... }}>
    <span>Floating Title</span>
  </div>
</ATVParallax>

License

MIT