https://github.com/keske/react-parallax-component

Easiest way to add scroll parallax effect on the component
https://github.com/keske/react-parallax-component

parallax react

Last synced: 19 days ago
JSON representation

Easiest way to add scroll parallax effect on the component

• Host: GitHub
• URL: https://github.com/keske/react-parallax-component
• Owner: keske
• Created: 2015-12-22T15:33:27.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-11T21:35:02.000Z (over 7 years ago)
• Last Synced: 2024-04-24T23:21:13.434Z (8 months ago)
• Topics: parallax, react
• Language: JavaScript
• Homepage:
• Size: 2.41 MB
• Stars: 164
• Watchers: 5
• Forks: 15
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-components - react-parallax-component - Easiest way to add scroll parallax effect on the component. (UI Animation / Parallax)
• awesome-react - react-parallax-component - Easiest way to add scroll parallax effect on the component.  (UI Animation / Parallax)
• awesome-list - react-parallax-component - Easiest way to add scroll parallax effect on the component. (Ferramentas / Parallax)
• awesome-react-components - react-parallax-component - Easiest way to add scroll parallax effect on the component. (UI Animation / Parallax)
• awesome-react-components - react-parallax-component - Easiest way to add scroll parallax effect on the component. (UI Animation / Parallax)

README

        
# React Parallax Component

Easiest way to add scroll parallax effect on the component.

![image](https://raw.githubusercontent.com/keske/react-parallax-component/master/src/example/images/example.gif?token=ABvV0pJZwvFAa0Nrvv6LRVqxkGZb8vhcks5Wgt1WwA%3D%3D)

## Installation

`npm install react-parallax-component`

## Usage

`import ParallaxComponent from 'react-parallax-component';`

```javascript

  


    Children component

  


```

### Props

- `speed` _(String)_ - animation speed, default: `-0.03`

- `width` _(String)_ - component width, default: `auto`

- `height` _(String)_ - component height, default: `auto`

- `top` _(String)_ - component top position, default: `inherit`

- `left` _(String)_ - component left position, default: `inherit`

- `right` _(String)_ - component top position, default: `inherit`

## Development

```

$ npm install

```

## Run app

```

$ npm start

```

And open in browser: [http://localhost:4000](http://localhost:4000)

## Build

```

$ npm run build

```