1.4.2 • Published 4 years ago

react-mouse-image-move v1.4.2

Weekly downloads
-
License
ISC
Repository
github
Last release
4 years ago

react-mouse-image-move

Publish

Preview

Gif 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

PropertyDescriptionRequired
chasingElement<ChasingElement /> as childrenyes
stylesYour stylesno
optionsOptions to child effectno
// 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

PropertyDescriptionRequired
chasingComponentHTML element as childrenyes
stylesYour stylesno
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