If you're looking for a way to offer a unique user experience, this widget may be the answer. Custom Cursor 2.0 displays an interactive cursor that reacts to elements on a page with a variety of animations. After specifying particular elements on a page like buttons, text or images, the cursor will react as the user hovers over those elements.
Creating cursor transitions that are focused on specific page elements is a great way to influence the navigation and interaction of your site visitors. Use this unique widget to draw attention to important parts of your site such as products or information.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Initial Release
Setup
If you've used the original Custom Cursor widget, there are some key differences when using Custom Cursor 2.0. Version 2.0 is a completely new build with different functionality. Version 2.0 displays the cursor across an entire page, rather than a defined area. Version 2.0 also uses one type of custom cursor and does not allow you to upload your own image. And lastly, only version 2.0 allows you to set page elements (like buttons, links, images, etc.) as triggers for cursor animations.
Drag the widget from the library and drop into your project in Design mode.
The widget can be placed anywhere. We suggest placing it off canvas to keep it out of the way.
Graphic Style: Use this to link a page element with the widget, allowing the cursor to animate when the user hovers over the selected element. For example, to make the cursor animate when the user hovers over all buttons, apply a single graphic styles to all the buttons on a page, and then enter the graphic style name into this field. Graphic style names should be lower case, with no spaces or special characters. "graphic-style" is OK.
CSS Selector: This field allows you to target specific CSS elements on a page. For example, you may enter "a" to target all a href instances, which will target links on a page. The default value in this field is "a", so all links will be targeted automatically. To untarget links, remove the "a" from the field.
Animation Style (Style 1 - Style 4): These styles display different cursor animations. The primary difference from style to style is the way the cursor animates while hovering over a target. These difference are subtle, and some styles also resize the cursor itself while triggered.
The remaining options allow you to set the colors, size and stroke width of the cursor. These are the settings you will use to style the cursor. The settings are named with their exact function, and will not be explained in detail as they are self-explanatory.