https://github.com/dreamsparkx/apple-tv-parallax

Apple TV parallax effect for react
https://github.com/dreamsparkx/apple-tv-parallax

apple-tv-parallax component image package parallax react react-component react-component-library

Last synced: 9 days ago
JSON representation

Apple TV parallax effect for react

• Host: GitHub
• URL: https://github.com/dreamsparkx/apple-tv-parallax
• Owner: dreamsparkx
• License: mit
• Created: 2020-07-04T20:34:32.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-24T23:16:44.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T17:05:38.007Z (7 months ago)
• Topics: apple-tv-parallax, component, image, package, parallax, react, react-component, react-component-library
• Language: TypeScript
• Homepage: https://dreamsparkx.github.io/apple-tv-parallax/
• Size: 28.7 MB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# apple-tv-parallax

[![Dependency Status](https://david-dm.org/dreamsparkx/apple-tv-parallax.svg)](https://david-dm.org/dreamsparkx/apple-tv-parallax) [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fdreamsparkx%2Fapple-tv-parallax.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fdreamsparkx%2Fapple-tv-parallax?ref=badge_shield)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) ![Apple TV Parallax](https://github.com/dreamsparkx/apple-tv-parallax/workflows/Apple%20TV%20Parallax/badge.svg) [![npm](https://img.shields.io/npm/v/@dreamsparkx/parallax/latest.svg)](https://www.npmjs.com/package/@dreamsparkx/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';

;

```

![](./extra/gifs/example.gif)

## License

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fdreamsparkx%2Fapple-tv-parallax.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fdreamsparkx%2Fapple-tv-parallax?ref=badge_large)