Custom Cursor

Adds custom cursor to your site, in addition or as an alternative to the native browser cursor.

Usage

<div data-lg-cursor>
  <div data-lg-cursor-pointer></div>
  <div data-lg-cursor-trail></div>
</div>

data-lg-cursor-pointer adds a small circle (customizable with CSS) at mouse position, while data-lg-cursor-trail adds a a line that follow mouse path.

You can add several pointers and trails with different inertia to create something unique.

Quick demo on this pen.

Custom style

The parent cursor element gets a .lg-cursor CSS class, while pointers and trails respectively get .lg-cursor-pointer and .lg-cursor-trail classes.

To customize the pointer look you can change .lg-cursor-pointer:before pseudo-element:

.lg-cursor-pointer:before {
  margin: -5px 0 0 -5px; // centers pointer
  width: 10px;
  height: 10px;

  background-color: cyan;
  border-radius: 50%;
}

The trail uses a SVG path element, so you can customize it like a regular path:

.lg-cursor-trail path {
  stroke: cyan; 
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px;
}

Hover

When hovering a or button elements, the parent cursor element gets a .lg-cursor--hover CSS class that you can use to change cursor look:

.lg-cursor--hover .lg-cursor-pointer:before {
  background-color: red;
  transform: scale(2);
}

In addition to a and button elements, you can add hover state to any element using data-lg-hover attribute:

<div class="btn" data-lg-hover="my-hover">
  Hover me!
</div>

When hovering such elements, the parent cursor element gets a CSS class corresponding to the data-lg-hover attribute:

.lg-cursor--hover--my-hover .lg-cursor-pointer:before {
  background-color: purple;
}

Attributes

Attribute	Type	Default	Description
data-lg-cursor-hide	Boolean	false	On the data-lg-cursor parent element, defines whether the native browser cursor should be hidden or not.
data-lg-cursor-inertia	Number	1	The inertia strength, which adds a delay between the custom cursor and the real one. No delay by default. This can be set once on the parent data-lg-cursor element if you want all the child elements (pointers and trails) to share the same value, or individually on each pointers and trails with different values. The default value can be changed globally in JS luge.settings({cursor: {inertia: 1}}).
data-lg-cursor-length	Integer	10	On a data-lg-cursor-trail element, defines how long the trail is. The default value can be changed globally in JS luge.settings({cursor: {trailLength: 10}}).
data-lg-hover	String	null	Adds hover state to any element.