react-image-parallax

1.0.0 • Public • Published

react-image-parallax

Demo

Install

$ npm install --save react-image-parallax

Example:

<ReactImageParallax scale={1.5}>
    {({y}, onImageLoad) =>
      <img
        style={{
          transform: new CssToMatrix()
            .scale(1.5, 1.5)
            .translate(0, y)
            .getMatrixCSS()
            // I use "css-to-matrix" module to enhance animation performance.
            // You can use normal css inline-style as you like
        }}
        onLoad={onImageLoad}
        src={'https://cdn.pixabay.com/photo/2017/01/21/01/11/the-pink-panter-1996281_1280.jpg'}
        alt="thumbnail"/>
    }
  </ReactImageParallax>
  • Note: I have to scale up the image as you declare it like the example above in order to make the parallax effect work.

Dependencies (0)

    Dev Dependencies (10)

    Package Sidebar

    Install

    npm i react-image-parallax

    Weekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • chuson1996