Circular Cursor Image With jQuery And CSS3 - Circle Cursor
File Size: | 3.54 KB |
---|---|
Views Total: | 5736 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.