Circular Cursor Image With jQuery And CSS3 - Circle Cursor

File Size: 3.54 KB
Views Total: 5333
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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>



3. Customize the circle cursor with the following options.



    // 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.