React-atv NPM | npm.io

react-atv-img

A port of @drewwilson’s amazing atvImg (Apple TV 3D parallax effect) library in React. It supports both touch and mouse events.

Install

npm install --save react-atv-img

Demo

http://keyanzhang.github.io/react-atv-img

GIF

Or run it locally:

git clone https://github.com/keyanzhang/react-atv-img/
cd react-atv-img
npm install
npm run examplex

Then navigate to http://localhost:3000/

API

Props

static propTypes = {
  isStatic: PropTypes.bool,
  staticFallback: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
};

Data

isStatic: Optional. A boolean value. When it evaluates to true, it disables the parallax effect, and shows the flattened image (staticFallback) instead.
staticFallback: Optional. A flattened image that contains all the layers.

Styling: use the following options to set up the width/height of the entire component

className: Optional.
style: Optional.

Example

import AtvImg from 'react-atv';

<AtvImg
  staticFallback="http://kloc.pm/images/kloc-icon-flattened.jpg"
  isStatic={false}
  className={'thisIsOptional'}
  style={{ width: 320, height: 190 }}
>
  <img style={{ maxWidth: '100%' }} src="http://kloc.pm/images/back.png" />
  <img style={{ maxWidth: '100%' }} src="http://kloc.pm/images/front.png" />
</AtvImg>