LuXDAmore/vue-cursor-fxPublic

NotificationsYou must be signed in to change notification settings
Fork16
Star69

🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible

License

MIT license

69 stars 16 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 337 Commits
.github		.github
.husky		.husky
.vscode		.vscode
dist		dist
docs		docs
public		public
src		src
.browserslistrc		.browserslistrc
.editorconfig		.editorconfig
.env		.env
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.lintstagedrc		.lintstagedrc
.markdownlint.json		.markdownlint.json
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.stylelintignore		.stylelintignore
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
TODO.md		TODO.md
_config.yml		_config.yml
babel.config.js		babel.config.js
commitlint.config.js		commitlint.config.js
husky.config.js		husky.config.js
jsconfig.json		jsconfig.json
lighthouse-audit.jpg		lighthouse-audit.jpg
package.json		package.json
postcss.config.js		postcss.config.js
renovate.json		renovate.json
stylelint.config.js		stylelint.config.js
tsconfig.json		tsconfig.json
vue.config.js		vue.config.js
yarn.lock		yarn.lock

Repository files navigation

🎉 Vue Cursor Fx

An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible

Installation

This package is available onnpm andyarn.

# Deps    npm install --save @luxdamore/vue-cursor-fx# Or    yarn add @luxdamore/vue-cursor-fx

Usage

As component

// 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>

As a global plugin

// PluginimportCursorFxfrom'@luxdamore/vue-cursor-fx';import'@luxdamore/vue-cursor-fx/dist/CursorFx.css';// InstallVue.use(CursorFx);

Browser's way

<!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>

Markup

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/>

Options

N.B.: the cursor is not activated on touchscreen devices.

Slots

# Available    slot="default"# Add some content in the middle of the cursor

Events

<cursor-fx@before-start="onBeforeStart"@after-start="onAfterStart"@ready="onReady"@before-destroy="onBeforeDestroy"@after-destroy="onAfterDestroy"></cursor-fx>

Props

Attribute	Type	Default value	About
config	Object	{}	The default options applied to cursor, see below the`BASE_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 are`circle` and`square`
delay	String, Number	60	Activate cursor after x seconds
mix-blend-mode	String	null	Set the global`mix-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,};

Methods

<!-- 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>

Integrations

VueRouter

<!-- App.vue --><template><div><router-view></router-view><cursor-fxref="cursor"/></div></template>

NuxtJs

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>

Tips

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());},},

👩🏻‍💻👨🏻‍💻 Development

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/docs folder.

🐞 Issues

Please make sure to read theissue reporting checklist before opening an issue.Issues not conforming to the guidelines may be closed immediately.

📝 Discussions

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.