1.4.2 • Published 4 years ago
react-mouse-image-move v1.4.2
react-mouse-image-move
Preview
Getting started
npm i react-mouse-image-move -D
or
yarn add react-mouse-image-move -D
How to work
Basicly, import MouseContainer
and ChasingElement
to your application:
import { MouseContainer, ChasingElement } from 'react-mouse-image-move'
Create your styles:
const styles = {
mouseContainer: {
backgroundColor: '#d3eeca',
width: '100%',
height: '70vh',
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
chasingElement: {
backgroundColor: '#7771c7',
width: 400,
height: 300
}
}
Call to your application:
function App() {
return (
<div>
<MouseContainer
options={{
effectType: 'perspective', // or 'movement'
max: 10,
perspective: 1000,
scale: 1.05,
}}
styles={styles.mouseContainer}
chasingElement={
<ChasingElement styles={styles.chasingElement}>
<div>Children element</div>
</ChasingElement>
}
/>
</div>
);
}
export default App
Elements
MouseContainer
Property | Description | Required |
---|---|---|
chasingElement | <ChasingElement /> as children | yes |
styles | Your styles | no |
options | Options to child effect | no |
// Options
{
effectType: 'perspective'|'movement' // Type of effect to your element
max: 10, // Element child rotation
perspective: 1000, // Rotation depth if is set in perspective effect type
easing: 'cubic-bezier(.03,.98,.52,.99)', // Transition between values
scale: 1.05, // How much does the size increase
speed: 1000, // Speed for transition element
axis: null|'x'|'y', // "x" only move horizontaly, "y" only move verticaly, "null" both
reset: true|false // If reset element or keep last position value
}
ChasingElement
Property | Description | Required |
---|---|---|
chasingComponent | HTML element as children | yes |
styles | Your styles | no |
1.2.0
4 years ago
1.3.7
4 years ago
1.3.6
4 years ago
1.2.7
4 years ago
1.3.5
4 years ago
1.2.6
4 years ago
1.3.4
4 years ago
1.2.5
4 years ago
1.4.2
4 years ago
1.2.4
4 years ago
1.4.1
4 years ago
1.2.3
4 years ago
1.2.2
4 years ago
1.3.0
4 years ago
1.2.1
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.3
4 years ago