- Notifications
You must be signed in to change notification settings - Fork17
🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible
License
NotificationsYou must be signed in to change notification settings
LuXDAmore/vue-cursor-fx
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible
This package is available onnpm andyarn.
# Deps npm install --save @luxdamore/vue-cursor-fx# Or yarn add @luxdamore/vue-cursor-fx
// Global component and cssimport{CursorFx}from'@luxdamore/vue-cursor-fx';import'@luxdamore/vue-cursor-fx/dist/CursorFx.css';// InstallVue.component(CursorFx.name,CursorFx);// Or, in a .vue fileimport{CursorFx}from'@luxdamore/vue-cursor-fx';exportdefault{components:{'cursor-fx':CursorFx,},};<stylesrc="@luxdamore/vue-cursor-fx/dist/CursorFx.css"></style>
// PluginimportCursorFxfrom'@luxdamore/vue-cursor-fx';import'@luxdamore/vue-cursor-fx/dist/CursorFx.css';// InstallVue.use(CursorFx);
<!doctype html><html><head><!-- CursorFx styles --><!-- Old way --><linkrel="stylesheet"href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css"/><!-- end old way --><!-- New way --><linkrel="preload"href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css"as="style"onload="this.rel='stylesheet'"/><linkrel="preload"href="https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js"as="script"/><!-- end new way --><!-- end CursorFx styles --></head><body><!-- Others script (ex. VueJs) and html. --><!-- CursorFx script --><scriptsrc="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.
<buttontype="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><buttontype="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><buttontype="button"title="Special button"data-cursor-hoverdata-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 value | About |
|---|---|---|---|
| config | Object | {} | The default options applied to cursor, see below theBASE_CONFIG |
| color | String | #333333 | Color for the cursor |
| color-hover | String | #333333 | Color, on hover, for the cursor |
| outside-size | String | null | The size of outer circle |
| inside-size | String | null | The size of inner dot |
| shape | String | null | Only available shapes arecircle andsquare |
| delay | String, Number | 60 | Activate cursor after x seconds |
| mix-blend-mode | String | null | Set the globalmix-blend-mode style |
| force-custom-slot | Boolean | false | Show or hide the internal default slot |
| allow-on-mobile | Boolean | false | Allow the cursor on mobile devices |
| hide-outside | Boolean | false | Hide outer circle |
| hide-inside | Boolean | false | Hide inner dot |
| disabled | Boolean | false | Disable the activation of the cursor |
constBASE_CONFIG={lerps:{dot:1,circle:0.18,custom:0.23,},scale:{ratio:0.18,min:0.5,max:1,},opacity:0.1,};
<!-- component.vue --><template><div><!-- start it, later --><cursor-fxref="cursor"disabled/></div></template><!-- Component --><script>exportdefault{mounted(){// start it, on mounted, or wherever you wantthis.$refs.cursor.start();},methods:{others(){// destroythis.$refs.cursor.destroy();//-> refresh automate: `destroy()` and `start()`this.$refs.cursor.refresh();},}},</script>
<!-- App.vue --><template><div><router-view></router-view><cursor-fxref="cursor"/></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><main><nuxt/></main><cursor-fxref="cursor"/></div></template>
- Q: How to fix problem with the disappearance of the cursor on nuxt route change ?
- A: Trigger cursor refresh on route change where component is placed.
watch:{$route(to,from){this.$nextTick(()=>this.$refs.cursor.refresh());},},
- Clone the repository:
git clone https://github.com/LuXDAmore/vue-cursor-fx.git;
- Install dependencies:
yarn install(ornpm install);
- Start a development server:
yarn dev(ornpm run dev);
- Extra, build the documentation (Github Pages):
yarn build(ornpm run build);- the content is automatically generated into the
/docsfolder.
Please make sure to read theissue reporting checklist before opening an issue.Issues not conforming to the guidelines may be closed immediately.
We're usingGithub discussions as a place to connect with other members of our community.You are free to ask questions and share ideas, so enjoy yourself.
Please make sure to read thecontributing guide before making a pull request.
Details changes for each release are documented in therelease notes.
MIT License // Copyright (©) 2019-nowLuca Iaconelli
If You want to share a beer, we can be really good friends 😄
☀It's always a good day to be magnanimous - cit.
About
🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible
