Parallax Image

Just import <ParallaxImage/> and set src.

import { ScrollContainer, ParallaxImage } from 'react-nice-scroll';
import 'react-nice-scroll/dist/styles.css';

const Index = () => {
  return (
    <ScrollContainer>
      <section
        style={{
          height: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <h1>Hello World!</h1>
      </section>
      <ParallaxImage src="https://reactjs.org/logo-og.png" />
      <section
        style={{
          height: '100vh',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <h1>Hello World!!</h1>
      </section>
    </ScrollContainer>
  );
};

export default Index;

parallaxImage Props

Props	Value Type	Default Value
src	string	required
alt	string |string	undefined
triggerElement	gsap.DOMTarget | string | undefined	undefined
start	string	top bottom
end	string	bottom top
axis	'y' | 'x'	y
fromPercent	number	-40
toPercent	number	40
containerHeight	string	100vh
imageScale	number	1.2
imageObjectPosition	string	center

parallaxImage Demo

Check demo.