https://github.com/keyz/react-atv-img

A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React.
https://github.com/keyz/react-atv-img

Last synced: 3 days ago
JSON representation

A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React.

• Host: GitHub
• URL: https://github.com/keyz/react-atv-img
• Owner: keyz
• License: mit
• Created: 2015-11-01T07:55:06.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-03-13T20:01:58.000Z (almost 7 years ago)
• Last Synced: 2025-01-03T04:39:05.415Z (9 days ago)
• Language: JavaScript
• Homepage: http://keyanzhang.github.io/react-atv-img
• Size: 159 KB
• Stars: 309
• Watchers: 9
• Forks: 29
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components-all - react-atv-img - A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React. (Uncategorized / Uncategorized)

README

        
# react-atv-img

A port of [@drewwilson](https://github.com/drewwilson)’s amazing [atvImg](https://github.com/drewwilson/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](http://keyanzhang.github.io/react-atv-img)

![GIF](http://i.imgur.com/XxLKcTW.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/](http://localhost:3000/)

## API

### Props

``` javascript

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

``` javascript

import AtvImg from 'react-atv-img';

```

## License

MIT