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: 8 months 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 10 years ago)
- Default Branch: master
- Last Pushed: 2018-03-13T20:01:58.000Z (over 7 years ago)
- Last Synced: 2025-03-24T02:52:54.823Z (9 months ago)
- Language: JavaScript
- Homepage: http://keyanzhang.github.io/react-atv-img
- Size: 159 KB
- Stars: 309
- Watchers: 8
- 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)
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