A pointer driven hover effect that rotates images in place with subtle parallax effects
npm install react-parallax-hoverThis is a 4kb (gzipped) component inspired by Apple TV's beautiful overlay effects, and the amazingly talented @drewwilson’s atvImg work.
https://tylerk.github.io/react-parallax-hover/
You will need the following versions listed as a dependency in your project:
- react @ 16.8.x
- react-dom @ 16.8.x
Install:
``
$ yarn add react-parallax-hover
- or -
$ npm install react-parallax-hover
`
`
import { ParallaxHover } from 'react-parallax-hover';
...
`
- Required: trueAny
- Type:
Component will accept a single child, or a flat array of children.
> Note: While this will 'layer' the parallax effect per-child, you will typiclaly see diminishing returns after two or three components.
---
- Required: truenumber
- Type: 200
- Default:
> Note: Currently only accepts values to be used as pixels. This component does not accept percentages, em, rem, etc...
---
- Required: truenumber
- Type: 200
- Default:
> Note: Currently does not accept a percentage, or relative height
---
- Type: number0 - 9
- Range: 5
- Default:
Adjust the exaggeration of the rotation on pointer move.
---
- Type: number0 - 9
- Range: 5
- Default:
Adjusts the darkness of the shadow.
---
- Type: number in pixels0
- Default:
---
Run the following after forking this repo:
```
$ git clone https://github.com/
$ cd react-parallax-hover
$ yarn
$ yarn start
You should see a Storybook instance open up in your default browser.
Happy hacking, and feel free to issue PR's against this repo.