Circular Cursor Image With jQuery And CSS3 - Circle Cursor

Circle Cursor is a really simple jQuery plugin that uses CSS3 transform to create a customizable circular cursor for a container you specify.

See also:

How to use it:

1. Download and put the JavaScript file circle_cursor.js after jQuery library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="circle_cursor.js"></script>

2. Initialize the plugin to create a default circle cursor as you hover over the container .box.

<div class="box">
<h1>jQuery Circle Cursor Plugin Demo</h1>
</div>

$(function(){
  $('.box').circursor();
});

3. Customize the circle cursor with the following options.

$(function(){
  $('.box').circursor({
    // size of cursor 1
    size1: "0",
    // size of cursor 2
    size2: "30px",
    // width of circle cursor
    width: "10px",
    // color of circle cursor
    color: "white",
    // duration of animation
    duration: "200",
    // easing effect
    easing: "easeOutQuint"
  });
});

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