@dreamsparkx/parallax
Version:
40 lines (26 loc) • 2.27 kB
Markdown
# apple-tv-parallax
[](https://david-dm.org/dreamsparkx/apple-tv-parallax) [](https://app.fossa.com/projects/git%2Bgithub.com%2Fdreamsparkx%2Fapple-tv-parallax?ref=badge_shield)
[](https://github.com/semantic-release/semantic-release)  [](https://www.npmjs.com/package/@dreamsparkx/parallax)
<!-- [](https://circleci.com/gh/dreamsparkx/apple-tv-parallax) -->
Live Demo: https://dreamsparkx.github.io/apple-tv-parallax/
## Install
`npm i @dreamsparkx/parallax`
## API
| Step | Description |
| --------- | -------------------------------------------------------------------------------------------------------- |
| layers | The images will be stacked on top of each other and the last element/image will be at the top. |
| isStatic | When you pass `true`, it disables the parallex effect, and shows the flattened image instead. (optional) |
| style | Pass on css properties (optional) |
| className | Pass on className (optional). |
## Example
```javascript
import { Parallax } from '@dreamsparkx/parallax';
<Parallex
layers={['/assets/images/back.png', '/assets/images/front.png']}
isStatic={false}
style={{ flex: 0.21, height: 100, textAlign: 'center' }}
/>;
```
## License
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fdreamsparkx%2Fapple-tv-parallax?ref=badge_large)