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:

• Configurable Cursor Animation Plugin With jQuery - lightMouse
• jQuery Plugin For Custom Cursor Using Font Awesome Icons - Awesome Cursor
• Lightweight jQuery Plugin For Handdrawn Help Cursors - HelpCursor

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.