1.0.0 • Published 7 years ago

react-image-parallax v1.0.0

Weekly downloads
2
License
MIT
Repository
-
Last release
7 years ago

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.