Pretty Cool Animated Cursor With jQuery - serialCursor

serialCursor is a jQuery plugin for creating a mouse pointer effect with a perpetual animation.

The whole design of the cursor is based on a rotating circle which never stops. The movement will be performed by moving the mouse.

See Also:

• Interactive Cursor Effects In jQuery And GSAP
• Fancy Cursor Animations In jQuery & GSAP - Cursor & Magnetic

How to use it:

1. Load the necessary JavaScript libraries in the document.

• jQuery
• GSAP
• Paper.js
• Simple-noise.js

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/gsap.min.js"></script>
<script src="/path/to/cdn/paper-core.min.js"></script>
<script src="/path/to/cdn/simplex-noise.min.js"></script>

2. Load the jQuery serialCursor plugin's files.

<link href="dist/jquery.serialcursor.css" rel="stylesheet" />
<script src="dist/jquery.serialcursor.js"></script>

3. Initialize the plugin with default options. This will apply a default cursor effect to the mouse pointer.

$(document).ready(function(){
  $('#serialcursor').serialcursor();
});

4. Config the cursor effect with the following parameters.

$('#serialcursor').serialcursor({
  stateDataAttr: 'data-serialcursor-state',
  strokeColor: 'rgba(255, 255, 255, .4)',
  strokeWidth: 1,
  noiseScale: 150,
  noiseRange: 4,
  htmlCursor: '<div id="serialcursor"></div>',
  htmlInner: '<canvas id="serialcursor-inner"></canvas>',
  htmlPointer: '<div id="serialcursor-pointer"></div>',
  htmlGrab:
    '<div id="serialcursor-pointer-grab">'+
      '<svg class="sub-icon is-left" xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15">'+
        '<path d="M6.42,14.68A1,1,0,1,0,7.9,13.27L2.43,7.5,7.9,1.73a1,1,0,0,0,0-1.45,1,1,0,0,0-1.44,0L.28,6.8a1,1,0,0,0,0,1.4Z"/>'+
      '</svg>'+
      '<svg class="sub-icon is-right" xmlns="http://www.w3.org/2000/svg" width="8" height="15" viewBox="0 0 8 15">'+
        '<path d="M1.77.32A1,1,0,0,0,.28,1.73L5.75,7.5.28,13.27a1,1,0,1,0,1.49,1.41L7.9,8.2a1,1,0,0,0,0-1.4Z"/>'+
      '</svg>'+
    '</div>'
});

5. Override the default styles of the cursor effect.

#serialcursor {
  pointer-events: none;
}

#serialcursor-inner {
  position: fixed;
  z-index: 13;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  opacity: 0.2;
  transition: opacity 900ms;
}

#serialcursor-pointer {
  position: fixed;
  z-index: 13;
  height: 8px;
  width: 8px;
  transform: translate(-50%, -50%);
  background-color: #bc2d39;
  border-radius: 100%;
  transition: 200ms;
}

#serialcursor.on-mousemove #serialcursor-inner {
  opacity: .6;
}

#serialcursor.is-click #serialcursor-inner {
  opacity: 1;
}

#serialcursor.is-click #serialcursor-pointer {
  transform: translate(-50%, -50%) scale(0.75);
}

#serialcursor-pointer-grab {
  opacity: 0;
  transition: opacity 400ms;
}

#serialcursor-pointer-grab .sub-icon {
  position: absolute;
  top: -2px;
  width: 6px;
  height: 14px;
  fill: #bc2d39;
  transition: 400ms;
}

#serialcursor-pointer-grab .sub-icon.is-left {
  left: -5px;
}

#serialcursor-pointer-grab .sub-icon.is-right {
  right: -5px;
}

#serialcursor.is-grab #serialcursor-pointer-grab {
  opacity: 1;
}

#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon {
  fill: #fff;
}

#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon.is-left {
  left: -16px;
}

#serialcursor.is-grab #serialcursor-pointer-grab .sub-icon.is-right {
  right: -16px;
}

[data-serialcursor-state='grab'] {
  cursor: grab;
}

---

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