Interactive Cursor

This component allows you to add an interactive cursor that can be set up to interact with specific elements on the page. It can be used across the whole site or only to appear over certain elements.

The cursor structure

The interactive cursor is in three parts..

The ball – This is the coloured circle that follows the cursor position in the viewport. This can expand to show text when hovering over specific elements (if that feature is being used).

The trail – The trail is a second element that trails slightly behind the first. This element expands when hovering over the chosen selectors. Ideally this needs to remain somewhat transparent, so the user can still see what elements they are selecting.

The text – if an element has text associated with it, it will become visible as the user hovers over that element.

Previewing states

The element has four states, which will be applied depending on which elements the user is hovering the cursor over. When you first add the element inside the builder, a ‘preview’ area will appear where you can change the states. This can be hidden once you have set it up for your site or page.

Each state has it’s own settings for controlling the amount of scale and changing opacity.

Standard – This is the default state as the user just hovers generally over the page. Note – if you only want the interactive cursor feature to appear over a few elements and not on the entire page, simply reduce the scale down to zero at this setting, so it’s not visible.

When showing text – One of the features (as described more below) is the ability to show text that can be specific to elements. For this to show, the element will expand and the text becomes visible.

Hovering over selectors – This state is for when a user is hovering over a something of interest, for eg a link, button, or input for a form. You can change the selectors that are included and customise the scales and opacity.

Mousedown – When the user actually clicks, the cursor will shrink by default.

How to Control which Elements the Cursor reacts to

To make the cursor expand and include text when hovering over a specific element, add the custom attribute with the name ‘data-x-hover’ and the value being the text you want to show.

For links, buttons, inputs, call to actions etc where you want the ‘Hovering over selectors‘ state to be shown, include the selectors inside the settings.

Note – for touch devices the element will not be active nor visible.