react-atv-img alternatives and similar libraries
Based on the "Parallax" category.
Alternatively, view react-atv-img alternatives based on common mentions on social networks and blogs.
-
react-parallax-tilt
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
Do you think we are missing an alternative of react-atv-img or a related project?
README
react-atv-img
A port of @drewwilson’s amazing atvImg (Apple TV 3D parallax effect) library in React. It supports both touch and mouse events.
Install
npm install --save react-atv-img
Demo
http://keyanzhang.github.io/react-atv-img
Or run it locally:
git clone https://github.com/keyanzhang/react-atv-img/
cd react-atv-img
npm install
npm run example
Then navigate to http://localhost:3000/
API
Props
static propTypes = {
layers: PropTypes.arrayOf(PropTypes.string).isRequired,
isStatic: PropTypes.bool,
staticFallback: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
};
Data
layers
: Required. An array of image URLs. The images will be stacked on top of each other and the last element will be at the top.isStatic
: Optional. A boolean value. When it evaluates totrue
, it disables the parallax effect, and shows the flattened image (staticFallback
) instead.staticFallback
: Optional. A flattened image that contains all the layers.
Styling: use the following options to set up the width/height of the entire component
className
: Optional.style
: Optional.
Example
import AtvImg from 'react-atv-img';
<AtvImg
layers={[
'http://kloc.pm/images/back.png',
'http://kloc.pm/images/front.png',
]}
staticFallback="http://kloc.pm/images/kloc-icon-flattened.jpg"
isStatic={false}
className={'thisIsOptional'}
style={{ width: 320, height: 190 }}
/>
License
MIT
*Note that all licence references and agreements mentioned in the react-atv-img README section above
are relevant to that project's source code only.