React Parallax Hover

This is a 4kb (gzipped) component inspired by Apple TV's beautiful overlay effects, and the amazingly talented @drewwilson’s atvImg work.

Demo

https://tylerk.github.io/react-parallax-hover/

Install

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
`

Usage

`
import { ParallaxHover } from 'react-parallax-hover';


...

`

Options

$3

- Required: true
- Type: Any

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.

---

$3

- Required: true
- Type: number
- Default: 200

> Note: Currently only accepts values to be used as pixels. This component does not accept percentages, em, rem, etc...

---

$3

- Required: true
- Type: number
- Default: 200

> Note: Currently does not accept a percentage, or relative height

---

$3

- Type: number
- Range: 0 - 9
- Default: 5

Adjust the exaggeration of the rotation on pointer move.

---

$3

- Type: number
- Range: 0 - 9
- Default: 5

Adjusts the darkness of the shadow.

---

$3

- Type: number in pixels
- Default: 0

---

How To Contribute

Run the following after forking this repo:

`
$ git clone https://github.com//react-parallax-hover/
$ 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.