Interactive Cursor

Add an interactive cursor and trail that can be set up to interact with specific elements on the page. The cursor has four different states, including text that can be displayed per element.

Note – The best place to add your interactive cursor element is inside of a site wide footer template.

Overview

The cursor is split into two parts, the ‘ball’ and the ‘trail’. The ball follows the cursor position, followed by the trail a few ms later (depending on the trail speed set).

As the cursor moves over different elements, it can transform into a number of states, making the page feel more interactive and can help the user know what to click or what certain elements do.

The cursor states are as follows.

• Default – The default state when nothing is happening.
• Hover – As the cursor passes over the hover selectors (links, buttons, inputs + any others you add)
• Showing text – If the cursor passes over an element that has hover text, it will switch to this state to show the text inside the ball.
• Mousedown – The state when the user presses the mouse down with the intention of clicking something.

Hover selectors – Set all the selectors for the cursor to transform into it’s hover state. The default is all links, buttons, inputs, textareas, and slides from either the Pro Slider, or Bricks’ native sliders.

Trail speed – 0-1. The slower the speed, the longer the trail takes to catch up. Recommended somewhere around 0.1 – 0.4 ( Setting to 1 would be instant and there would be no delay ).

Preview cursor state

Each state allows for the ball and trail to change scale, to preview in the builder set the preview cursor state to the state and change the scale.

Ball/Trail Colors – Set your colors. It’s generally recommended to have the trail color have a low opacity, this way when the user clicks over links/buttons etc, the text underneath is still readable.

Adding Hover Text to Elements

If you want the cursor to display text when it moves over a certain element, the way to add the text is to add an attribute ‘data-x-hover’ with the value being the text.