---

# Basic usage

This is an example with the minimum parameters to be specified in JS.

<div class="magnet"></p>

.magnet {
  display: inline-block;
  padding: 20px;
  border-radius: 100px;
  color: white;
  background-color: #0040BF;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: all .5s ease;
}
.magnet-mouse-active {
  background-color: #000000;
}

let mm = new MagnetMouse({
  magnet: {
    element: '.magnet'
  }
});

mm.init();

---

# Follow mouse

One or more elements that follow the mouse.

.follow {
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  background-color: #f0d647;
  border-radius: 100%;
  transition: transform .1s ease;
}

new MagnetMouse({
  magnet: {
    element: '.magnet'
  },
  follow: {
    element: '.follow'
  }
});

---

# Position

Change the position of the element relative to the mouse. By default it will be centered.

new MagnetMouse({
  magnet: {
    element: '.magnet'
    position: 'center'
  }
});

---

# Callback

You have access to 2 callbacks: One when the mouse enter in the magnet effect and one when the mouse leave in the magnet effect.
Inside the callback you have access to certain data (position element and other variables) See more.

new MagnetMouse({
  inCallback: function (data) {
    // Make what you want
  },
  outCallback: function (data) {
    // Make what you want
  }
});

---

# Examples

Some examples in which this library can be used.

---

# Menu

You can make a menu with cool animation on hover.

---

# Fun follow

Several elements that follow the mouse.

---

Anothers ideas are coming soon...