Make An Element Follow Your Mouse - jQuery mouseFollower

File Size: 2.88 KB
Views Total: 3390
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Make An Element Follow Your Mouse - jQuery mouseFollower

mouseFollower is a small jQuery plugin makes any element follow your mouse inside a specific container, with a smooth animation.

See also:

How to use it:

1. Add your element to a container element as this:

<div class="container">
  <span class="badge">Element</span>
</div>

2. Add jQuery library and the mouseFollower.js script to the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.mousefollower.js"></script>

3. Call the function on the container element and done.

$(function(){
   $('.container').mousefollower();
});

4. You are allowed to change the default CSS selector of the element which will move along with your mouse.

$(function(){
   $('.container').mousefollower({

     followerSelector: ".badge"
     
   });
});

Change log:

2018-03-25

  • bugfixed

2018-03-24

  • Add data variable to avoid initialize two time the same canvas

This awesome jQuery plugin is developed by julien-its. For more Advanced Usages, please check the demo page or visit the official website.