Quick start

1. Include the plugin via jsDelivr CDN

<script src=“https://cdn.jsdelivr.net/gh/thelevicole/[email protected]/dist/cce.js”></script>

2. Create a DOM element

<div class=“cursor-item”></div>

3. Give it some styles

.cursor-item {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    border-top-left-radius: 0;
    border: 2px solid #fff;
    box-shadow: 2px 4px 15px -5px #000;
    transform-origin: top left;
}

4. Initiate plugin

$('.cursor-item').cursorElement();

Options

The plugin also accepts theses options

Option Default Description
offsetX 0 Offset the element horizontally by nth number of pixels
offsetY 0 Offset the element vertically by nth number of pixels
preserveCursor false When set to true, show the browsers default cursor with the custom element.

Examples

Mouse over element with ID #element-1
.cursor-item[data-id="example-1"] {
    background: rgba(255, 0, 0, 0.8);
}
Hover me!
Mouse over element with ID #element-2
.cursor-item[data-id="example-2"] {
    border-radius: 0;
}
Hover me!
Mouse down event
.cursor-item[data-event="click"] {
    transform: scale(0.8);
}
Click me!
Mouse over element with tag <a>
.cursor-item[data-el="a"] {
    transform: rotate(45deg);
}
Hover me!