react-parallax
Version:
A React Component for parallax effect working in client-side and server-side rendering environment
137 lines (104 loc) • 9.47 kB
Markdown
```sh
yarn add react-parallax
```
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.
<a href="https://www.buymeacoffee.com/rrutsche"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=rrutsche&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>
```javascript
import { Parallax } from 'react-parallax';
const Container = () => (
<Parallax blur={10} bgImage="path/to/image.jpg" bgImageAlt="the cat" strength={200}>
Content goes here. Parallax height grows with content height.
</Parallax>
);
```
```javascript
import { Parallax, Background } from 'react-parallax';
const Container = () => (
<Parallax
blur={{ min: -15, max: 15 }}
bgImage={require('path/to/another/image.jpg')}
bgImageAlt="the dog"
strength={-200}
>
Blur transition from min to max
<div style={{ height: '200px' }} />
</Parallax>
);
```
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 = () => (
<Parallax strength={300}>
<Background className="custom-bg">
<img src="http://www.fillmurray.com/500/320" alt="fill murray" />
</Background>
</Parallax>
);
```
Calculate your own stuff depending on the `percentage` value.
```javascript
import { Parallax, Background } from 'react-parallax';
const Container = () => (
<Parallax
bgImage="/path/to/another/image"
renderLayer={percentage => (
<div
style={{
position: 'absolute',
background: `rgba(255, 125, 0, ${percentage * 1})`,
left: '50%',
top: '50%',
width: percentage * 500,
height: percentage * 500,
}}
/>
)}
>
<p>... Content</p>
</Parallax>
);
```
Child nodes inside this Background will be positioned like the bgImage behind the other children. Unlike the bgImage there is no automatic scaling.
| 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 => (<div style={{ background:｀rgba(255, 125, 0, ${percentage * 1})｀}}/> )}` |
| **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 | |
```sh
yarn
yarn dev
```
Port `3000` on all OS by default. Can be set with option -port=8080
MIT
[]: https://img.shields.io/npm/v/react-parallax.svg?style=flat-square
[]: https://www.npmjs.com/package/react-parallax