https://github.com/venits/react-parallax-button

Bring your react buttons to next level with parallax effect.
https://github.com/venits/react-parallax-button

Last synced: about 1 month ago
JSON representation

Bring your react buttons to next level with parallax effect.

• Host: GitHub
• URL: https://github.com/venits/react-parallax-button
• Owner: venits
• Created: 2018-04-08T14:16:14.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-04-08T20:38:31.000Z (over 6 years ago)
• Last Synced: 2024-10-27T16:21:45.983Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://react-parallax.firebaseapp.com/
• Size: 862 KB
• Stars: 12
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-web-effect - react-parallax-button - Bring your react buttons to next level with parallax effect. (🚀 A series of exquisite and compact web page cool effects / Button Effect)
• awesome-web-effect - react-parallax-button - Bring your react buttons to next level with parallax effect. (🚀 A series of exquisite and compact web page cool effects / Button Effect)

README

        
# React Parallax Button

Bring your react buttons to next level with parallax effect.

Demo: https://react-parallax.firebaseapp.com/

## Preview

![Preview](https://raw.githubusercontent.com/venits/react-parallax-button/master/demo.gif)

## Installation

Install module:

```js

 npm i -s react-parallax-button

```

Import it in your React project:

```js

import { ParallaxButton, ParallaxWrapper} from 'react-parallax-button'

```

## Usage

### ParallaxButton

This is the most basic components. It allows you to create simple buttons with parallax effect.

All you have to do to create button:

```js

render() {

  return (

    

  )

}

```

Additionally you can pass few props for custom use:

```js

```

Prop called `parallaxScale` is responsible of intensity of parallax effect. Default value is 1.

Setting value to `0.5` will make your parallax effect half intensive.

### ParallaxWrapper

This component will allow you to add parallax effect to any view or image in your application.

Simply wrap your component with `ParallaxWrapper` and you good to go ;)

```js

  

    

```

You can check how it works by visiting [this page](https://react-parallax.firebaseapp.com/).

## Summary

I hope you will like this simple component and use it in your website, also if you have any problems or questions please let me know, I will be more than happy to help you :)

My email:  [[email protected]](mailto:[email protected])