Skip to content
A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React.
Branch: master
Clone or download
Latest commit 6360ed9 Aug 23, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example initial commit Nov 2, 2015
src Fixes #3 Aug 21, 2016
test initial commit Nov 2, 2015
.babelrc initial commit Nov 2, 2015
.eslintrc initial commit Nov 2, 2015
.gitignore initial commit Nov 2, 2015
.npmignore fixed a typo in .npmignore Nov 2, 2015
LICENSE initial commit Nov 2, 2015
README.md look ma, no requires Nov 2, 2015
devServer.js initial commit Nov 2, 2015
package.json fixed a typo in .npmignore Nov 2, 2015
webpack.config.js initial commit Nov 2, 2015

README.md

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 example

Then navigate to http://localhost:3000/

API

Props

static propTypes = {
  layers: PropTypes.arrayOf(PropTypes.string).isRequired,
  isStatic: PropTypes.bool,
  staticFallback: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
};

Data

  • layers: Required. An array of image URLs. The images will be stacked on top of each other and the last element will be at the top.
  • 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-img';

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

License

MIT

You can’t perform that action at this time.