Circular Cursor Image With jQuery And CSS3 - Circle Cursor

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.

  • Publication date: 09.11.2017
  • Source