Press "Enter" to skip to content

Custom Animated Cursor Effects for Interactive Elements | Vue Cursor Fx

Vue Cursor Fx is an animated cursor effect intended for interactive elements such as navigation – w/ VueJS – SSR compatible.

animated custom cursor css, cursor effects css, mouse cursor effects javascript, javascript change cursor to image, custom cursor html code, change mouse pointer

Other Vue/Nuxt plugins

  • Vue Fake 3D Image effect
  • Canvas 3D Generative Art
  • Nuxt Prune HTML
  • Vue CSS Doodle
  • Nuxt APIs to file

How to make use of it:

Install and download:

# NPM
$ npm i @luxdamore/vue-cursor-fx

1. Import and register cursor-fx after installation.

// Globally
import { CursorFx } from '@luxdamore/vue-cursor-fx';
import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';
Vue.component(
  CursorFx.name,
  CursorFx
);
// Locally
import { CursorFx } from '@luxdamore/vue-cursor-fx';
  export default {
    components: {
      'cursor-fx': CursorFx,
    },
};
<style src="@luxdamore/vue-cursor-fx/dist/CursorFx.css"></style>
// As a plugin
import CursorFx from '@luxdamore/vue-cursor-fx';
import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';
Vue.use(
  CursorFx
);

2. Props available.

<cursor-fx></cursor-fx>
disabled: {
  type: Boolean,
  default: false,
},
id: {
  type: String,
  default: 'cursor-fx',
},
config: {
  type: Object,
  default: () => {},
},
mixBlendMode: {
  type: String,
  default: null,
},
color: {
  type: String,
  default: '#333333',
},
colorHover: {
  type: String,
  default: '#333333',
},
outsideSize: {
  type: String,
  default: null,
},
insideSize: {
  type: String,
  default: null,
},
shape: {
  type: String,
  default: null,
},
delay: {
  type: [
    Number,
    String,
  ],
  default: 60,
},
forceCustomSlot: {
  type: Boolean,
  default: false,
},
allowOnMobile: {
  type: Boolean,
  default: false,
},
hideOutside: {
  type: Boolean,
  default: false,
},
hideInside: {
  type: Boolean,
  default: false,
},

3. Events.

@before-start="onBeforeStart"
@after-start="onAfterStart"
@ready="onReady"
@before-destroy="onBeforeDestroy"
@after-destroy="onAfterDestroy"

4. API methods.

// start
this.$refs.cursor.start();

// destroy
this.$refs.cursor.destroy();

// refresh
this.$refs.cursor.refresh();

Props

AttributeTypeDefault valueAbout
configObject{}The default options applied to cursor, see below the BASE_CONFIG
colorString#333333Color for the cursor
color-hoverString#333333Color, on hover, for the cursor
outside-sizeStringnullThe size of outer circle
inside-sizeStringnullThe size of inner dot
shapeStringnullOnly available shapes are circle and square
delayString, Number60Activate cursor after x seconds
mix-blend-modeStringnullSet the global mix-blend-mode style
force-custom-slotBooleanfalseShow or hide the internal default slot
allow-on-mobileBooleanfalseAllow the cursor on mobile devices
hide-outsideBooleanfalseHide outer circle
hide-insideBooleanfalseHide inner dot
disabledBooleanfalseDisable the activation of the cursor

Animated Custom Cursor Effects, Vue Cursor Fx Plugin/Github, javascript follow mouse effect


See Demo And Download

Official Website(LuXDAmore): Click Here

This superior jQuery/javascript plugin is developed by LuXDAmore. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.