Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rrutsche/react-parallax
A React Component for parallax effect
https://github.com/rrutsche/react-parallax
Last synced: 2 months ago
JSON representation
A React Component for parallax effect
- Host: GitHub
- URL: https://github.com/rrutsche/react-parallax
- Owner: rrutsche
- License: mit
- Created: 2015-06-29T20:27:18.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T00:09:24.000Z (over 1 year ago)
- Last Synced: 2024-10-31T19:39:16.528Z (3 months ago)
- Language: TypeScript
- Size: 29.2 MB
- Stars: 854
- Watchers: 7
- Forks: 76
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react - react-parallax - A React Component for parallax effect.  (UI Animation / Parallax)
README
# react-parallax [![NPM version][npm-image]][npm-url]
## Install
```sh
yarn add react-parallax
```
### [Demo on codesandbox](https://codesandbox.io/embed/r0yEkozrw?view=preview)
## Contribute
If you find any bug or have problems and/or ideas regarding this library feel free to open an issue or pull request. Either way please create a working example so I can reproduce it. Link to a repository or even easier - fork the demo codesandbox project. This would help a lot.
This project is maintained during evenings and weekends. If you like it, please consider to buy me a coffee ;-) ...or contribute in other ways.
## Usage examples
### Basic - background image with fixed blur effect
```javascript
import { Parallax } from 'react-parallax';
const Container = () => (
Content goes here. Parallax height grows with content height.
);
```
### Dynamic blur and negative strength for reverse direction
```javascript
import { Parallax, Background } from 'react-parallax';
const Container = () => (
Blur transition from min to max
);
```
### Custom background element
Use the background component for custom elements. Unlike the `bgImage` this one will not be scaled depending on the parent/window width.
```javascript
import { Parallax, Background } from 'react-parallax';
const Container = () => (
);
```
### Render prop
Calculate your own stuff depending on the `percentage` value.
```javascript
import { Parallax, Background } from 'react-parallax';
const Container = () => (
(
)}
>
... Content
);
```
## Background Component
Child nodes inside this Background will be positioned like the bgImage behind the other children. Unlike the bgImage there is no automatic scaling.
## Props
| Name | Type | Default | Description | example |
| --------------------- | :-----------: | :-----------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------------------------------------------------------ |
| **bgImage** | `String` | | path to the background image that makes parallax effect | |
| **bgImageAlt** | `String` | | alt text for bgImage. | |
| **bgImageSize** | `String` | | img `sizes` attribute. | |
| **bgImageSrcSet** | `String` | | img `srcset` attribute | |
| **style** | `Object` | | style object for the component itself | |
| **bgStyle** | `Object` | | additional style object for the bg image/children [Valid style attributes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) | |
| **bgClassName** | `String` | | custom classname for image | |
| **contentClassName** | `String` | `react-parallax-content` | custom classname for parallax inner | |
| **bgImageStyle** | `Object` | | set background image styling | `{height: '50px', maxWidth: '75px', opacity: '.5'}` |
| **strength** | `Number` | `100` | parallax effect strength (in pixel). this will define the amount of pixels the background image is translated | |
| **blur** | `Number` | `0` or `{min:0, max:5}` | number value for background image blur or object in format `{min:0, max:5}` for dynamic blur depending on scroll position | |
| **renderLayer** | `Function` | | Function that gets a percentage value of the current position as parameter for custom calculationa. It renders a layer above the actual background, below `children`. | `renderLayer={percentage => (
)}` |
| **disabled** | `Boolean` | `false` | turns off parallax effect if set to true | `{height: '50px', maxWidth: '75px', opacity: '.5'}` |
| **className** | `String` | | set an additional className | |
| **parent** | `Node` | `document` | set optional parent for nested scrolling | |
| **children** | | | used to display any content inside the react-parallax component | |
## Development
```sh
# setup
yarn
# Development, live reload, JSX transpiling, run:
yarn dev
```
Port `3000` on all OS by default. Can be set with option -port=8080
# License
MIT
[npm-image]: https://img.shields.io/npm/v/react-parallax.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-parallax