2.0.2 • Published 3 years ago

react-parallax-hover v2.0.2

Weekly downloads
42
License
ISC
Repository
github
Last release
3 years ago

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';

<ParallaxHover width={500} height={500}>
    ...
</ParallaxHover>

Options

children

  • 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.


width

  • 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...


height

  • Required: true
  • Type: number
  • Default: 200

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


rotation

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

Adjust the exaggeration of the rotation on pointer move.


shadow

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

Adjusts the darkness of the shadow.


borderRadius

  • Type: number in pixels
  • Default: 0

How To Contribute

Run the following after forking this repo:

$ git clone https://github.com/<your username>/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.

2.0.2

3 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.3.1

10 years ago

0.3.0

10 years ago

0.2.3

10 years ago

0.2.2

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.0.1

10 years ago