react-parallax v3.5.1

react-parallax

Install

yarn add react-parallax

Demo on codesandbox

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

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>
);

Dynamic blur and negative strength for reverse direction

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>
);

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.

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>
);

Render prop

Calculate your own stuff depending on the percentage value.

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>
);

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

Development

# 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