An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible
This package is available on npm.
# Deps
npm install --save @luxdamore/vue-cursor-fx
// Global component and css
import { CursorFx } from '@luxdamore/vue-cursor-fx';
import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';
// Install
Vue.component(
CursorFx.name,
CursorFx
);
// Or
// in a .vue file
import { CursorFx } from '@luxdamore/vue-cursor-fx';
export default {
components: {
'cursor-fx': CursorFx,
},
};
<style src="@luxdamore/vue-cursor-fx/dist/CursorFx.css"></style> // Plugin
import CursorFx from '@luxdamore/vue-cursor-fx';
import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';
// Install
Vue.use(
CursorFx
); <!doctype html>
<html>
<head>
<!-- CursorFx style -->
<!-- Old way -->
<link rel="stylesheet" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css" />
<!-- end old way -->
<!-- New way -->
<link rel="preload" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css" as="style" onload="this.rel='stylesheet'" />
<link rel="preload" href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js" as="script" />
<!-- end new way -->
<!-- end CursorFx style -->
</head>
<body>
<!--
Others script (ex. VueJs) and html.
-->
<!-- CursorFx script -->
<script src="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js"></script>
<!-- end CursorFx script -->
</body>
</html>Use one time in the main file of your project or in every views, where you want it.
<button
type="button"
title="Special button"
data-cursor-hover
>
Add `data-cursor-hover` to an every html elements that you want to see the cursor bigger on hover
</button>
<button
type="button"
title="Special button"
data-cursor-hidden
>
Add `data-cursor-hidden` to an every html elements that you want to hide the cursor on hover
</button>
<button
type="button"
title="Special button"
data-cursor-hover
data-cursor-mix-blend-mode="difference"
>
Add `data-cursor-mix-blend-mode` to an every html elements that you want to change the mix-blend-mode type.
</button>
<cursor-fx />N.B.: the cursor is not activated on touchscreen devices.
# Available
slot="default" # Add some content in the middle of the cursor
<cursor-fx
@before-start="onBeforeStart"
@after-start="onAfterStart"
@ready="onReady"
@before-destroy="onBeforeDestroy"
@after-destroy="onAfterDestroy"
></cursor-fx>| Attribute | Type | Default | Required | About |
|---|---|---|---|---|
| config | Object | {} | false | The default options applied to cursor, see below the BASE_CONFIG |
| color | String | #333333 | false | Color for the cursor |
| color-hover | String | #333333 | false | Color, on hover, for the cursor |
| outside-size | String | null | false | The size of outer circle |
| inside-size | String | null | false | The size of inner dot |
| shape | String | null | false | Only available shapes are circle and square |
| delay | String, Number | 60 | false | Activate cursor after x seconds |
| mix-blend-mode | String | null | false | Set the global mix-blend-mode style |
| force-custom-slot | Boolean | false | false | Show or hide the internal default slot |
| allow-on-mobile | Boolean | false | false | Allow the cursor on mobile devices |
| hide-outside | Boolean | false | false | Hide outer circle |
| hide-inside | Boolean | false | false | Hide inner dot |
| disabled | Boolean | false | false | Disable the activation of the cursor |
const BASE_CONFIG = {
lerps: {
dot: 1,
circle: 0.18,
custom: 0.23,
},
scale: {
ratio: 0.18,
min: 0.5,
max: 1,
},
opacity: 0.1,
}; <!-- App.vue -->
<template>
<div>
<cursor-fx ref="cursor" disabled />
</div>
</template>
<!-- Component -->
<script>
export default {
mounted() {
this.$refs.cursor.start();
// Other methods
// this.$refs.cursor.destroy();
// this.$refs.cursor.refresh();
},
},
</script> <!-- App.vue -->
<template>
<div>
<router-view></router-view>
<cursor-fx />
</div>
</template>- For the entire website: place the component in the desired layouts (ex. layouts/default.vue);
- For some pages only: place the component in the desired pages (ex. pages/index.vue).
<!-- layout/default.vue -->
<template>
<div>
<nuxt />
<cursor-fx />
</div>
</template>Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide before making a pull request.
Details changes for each release are documented in the release notes.
MIT License // Copyright (©) 2020-present Luca Iaconelli
Do you want to share a beer? We can be good friends.. Paypal // Patreon
It's always a good day to be magnanimous - cit
