Copy the module into your project. In order to make the cursor works — you need to add a data tag `data-ccursor` to the HTML element on which you want to use the cursor and run the function in your JS.
*.HTML <button data-ccursor>Button</button> *.JS contextCursor();There are two basic effects — Morph (default) and Lift. If you want to use Lift effect just add it to the data-ccursor attribute.
You can disable parallax and paddings effects only for certain elements if you add `noParallax` and `noPadding` to the `data-ccursor` attribute. You can combine these two props.
*.HTML — DEFAULT PARALLAX <button data-ccursor>Button</button> *.HTML — LIFT <button data-ccursor=”lift”>Button</button>Global settings are settings that will affect all target elements and the cursor itself. You can adjust — cursor size, cursor speed, parallax shift index on hover, and paddings on hover.
*.JS contextCursor({
radius: 20, //will change the radius/size of the cursor
transitionSpeed: 0.2, //To change thee cursor speed
parallaxIndex: 16, //how vv cvv you want to shift elements
hoverPadding: 6, //will change the cursor padding around target element
});Cursor styles are written as CSS variables in the root directory, so you can easily overwrite them. Also, you can change the cursor active style — hover event will add `c-cursor_active` class to the cursor.
*.CSS — CURSOR STYLES :root {
--main-cursor-clr: rgb(0, 0, 0, 0.2);
--main-cursor-hover-clr: rgb(0, 0, 0, 0.07);
--ghost-shadow: 0 7px 15px rgba(0, 0, 0, 0.14);
}
body {
margin: 0;
padding: 0;
}
.c-cursor {
position: fixed;
z-index: 9999;
pointer-events: none;
border-radius: 200px;
background-color: var(--main-cursor-clr);
}