đź”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The Parallax Hover React Component will automatically turn multiple layers into 3D parallax icons as introduced in Apple TV.

Animation React

Documentation

Parallax Hover React Component

Inspired by Apple TV's glorious overlay effects, and @drewwilson’s atvImg plugin.

react-parallax-hover supports configuration options, and multiple layers.

Install

npm install react-parallax-hover --save-dev

Demo

http://codepen.io/TylerK/full/Gpdqqq

Usage

import ParallaxHover from 'react-parallax-hover';  <ParallaxHover width={500} height={500}>     [...] </ParallaxHover> 

Configuration

children required

  • 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

  • Type: Number
  • Default: 200

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


height (required)

  • Type: Number
  • Default: 200

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


rotation

blah blah

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


scale

  • Type: Number
  • Range: 1 - 9
  • Default: 5

Adjusts how large the component will grow.


speed

  • TODO

borderRadius

  • Type: Number in pixels
  • Default: 0

Run the example locally

git clone https://github.com/tylerk/react-parallax-hover/ cd react-parallax-hover npm install npm start 

You May Also Like