react-parallax
v3.0.4-rc.0TypeScript
A React Component for parallax effect working in client-side and server-side rendering environment
10.9K/weekUpdated 10 months agoMITUnpacked: 34.5 KB
Published by Richard Rutsche
npm install react-parallaxreact-parallax [![NPM version][npm-image]][npm-url]
Install
``sh`
yarn add react-parallax
$3
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
$3
`javascript
import { Parallax } from 'react-parallax';
const Container = () => (
Content goes here. Parallax height grows with content height.
);
`
$3
`javascript
import { Parallax, Background } from 'react-parallax';
const Container = () => (
bgImage={require('path/to/another/image.jpg')}
bgImageAlt="the dog"
strength={-200}
>
Blur transition from min to max
);
`
$3
Use the background component for custom elements. Unlike the
this one will not be scaled depending on the parent/window width.`javascript
import { Parallax, Background } from 'react-parallax';const Container = () => (
);
`$3
Calculate your own stuff depending on the
value.`javascript
import { Parallax, Background } from 'react-parallax';const Container = () => (
renderLayer={percentage => (
position: 'absolute',
background:
rgba(255, 125, 0, ${percentage * 1}),
left: '50%',
top: '50%',
width: percentage * 500,
height: percentage * 500,
}}
/>
)}
>
... 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 |
| | 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 | |
| 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
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