Parallax Banners

The following demonstrates some common usage of the <ParallaxBanner> component.

import { ParallaxBanner } from 'react-scroll-parallax';

Example with a Single Image

A single parallaxing image within a banner is achieved by adding a single layer object with an image and speed:

const Component = () => {
  return (
    <ParallaxBanner
      layers={[{ image: '/static/banner.jpg', speed: -15 }]}
      className="aspect-[2/1]"
    />
  );
};

Be sure to set a style by either a className or the style prop that will give the banner container a height. You could also use an aspect ratio like the example above which uses a class that sets the aspect-ratio to 2 / 1.

tip

The parallax effect is more natural when the image moves slower than the page, speed < 0.

Example with Multiple Layers

This example uses two layers, one background and one foreground. The order of the defined layer determines the stacking of the each image: First in the array will appear at the back and be covered by subsequent layers.

The image prop defines the layer image. The speed prop is used to make the layer move at it's own pace.

The foreground speed is defined so that it will move faster than the background:

const Component = () => {
  return (
    <ParallaxBanner
      layers={[
        { image: '/static/banner-background.jpg', speed: -20 },
        { image: '/static/banner-foreground.png', speed: -10 },
      ]}
      className="aspect-[2/1]"
    />
  );
};

tip

For the most natural visual effect with multiple layers make each layer speed depend on the distance of the image: the closer the items in the image the faster they should move; the further away the slower they should move.

Example with a headline

By defining children you can add any markup for a headline or any other custom elements. In the following example the headline is positioned absolutely over each banner layer.

const Component = () => {
  return (
    <ParallaxBanner
      layers={[
        { image: '/static/banner-background.jpg', speed: -20 },
        { image: '/static/banner-foreground.png', speed: -10 },
      ]}
      className="aspect-[2/1]"
    >
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-8xl text-white font-thin">Hello World!</h1>
      </div>
    </ParallaxBanner>
  );
};

Embed the headline in the scene

You can take the effect even further by embedding the headline in the scene. This can be done by defining another layer and assigning the markup to the children of that layer.

const Component = () => {
  return (
    <ParallaxBanner
      layers={[
        { image: '/static/banner-background.jpg', speed: -20 },
        {
          speed: -15,
          children: (
            <div className="absolute inset-0 flex items-center justify-center">
              <h1 className="text-8xl text-white font-thin">Hello World!</h1>
            </div>
          ),
        },
        { image: '/static/banner-foreground.png', speed: -10 },
      ]}
      className="aspect-[2/1]"
    />
  );
};