@luxdamore/vue-cursor-fx

    1.6.2 • Public • Published

    🎉 Vue Cursor Fx

    Code Quality Downloads Dependencies Version Donate

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

    Installation

    This package is available on npm and yarn.

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

    Usage

    As component

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

    As a global plugin

        // Plugin
        import CursorFx from '@luxdamore/vue-cursor-fx';
        import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';
    
        // Install
        Vue.use(
            CursorFx
        );

    Browser's way

        <!doctype html>
        <html>
            <head>
    
                <!-- CursorFx styles -->
    
                <!-- 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 styles -->
    
            </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>

    Markup

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

    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
        const BASE_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-fx ref="cursor" disabled />
    
            </div>
        </template>
    
        <!-- Component -->
        <script>
            export default {
                mounted() {
    
                    // start it, on mounted, or wherever you want
                    this.$refs.cursor.start();
    
                },
                methods: {
                    others() {
    
                        // destroy
                        this.$refs.cursor.destroy();
    
                        //-> refresh automate: `destroy()` and `start()`
                        this.$refs.cursor.refresh();
    
                    },
                }
            },
        </script>

    Integrations

    VueRouter
        <!-- App.vue -->
        <template>
            <div>
    
                <router-view></router-view>
    
                <cursor-fx />
    
            </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-fx />
    
            </div>
        </template>

    👩🏻‍💻👨🏻‍💻 Development

    1. Clone the repository:
      • git clone https://github.com/LuXDAmore/vue-cursor-fx.git;
    2. Install dependencies:
      • yarn install (or npm install);
    3. Start a development server:
      • yarn dev (or npm run dev);
    4. Extra, build the documentation (Github Pages):
      • yarn build (or npm run build);
      • the content is automatically generated into the /docs folder.

    🐞 Issues

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

    📝 Discussions

    We're using Github discussions as a place to connect with other members of our community. You are free to ask questions and share ideas, so enjoy yourself.

    👥 Contribution

    Please make sure to read the contributing guide before making a pull request.

    📖 Changelog

    Details changes for each release are documented in the release notes.

    🆓 License

    MIT License // Copyright (©) 2019-now Luca Iaconelli

    💼 Hire me

    Contacts

    💸 Are you feeling generous today?

    If You want to share a beer, we can be really good friends 😄

    Paypal // Patreon // Ko-fi

    It's always a good day to be magnanimous - cit.


    💡 Lighthouse

    Lighthouse audit score


    💘 Inspired by

    CustomCursors by Tympanus

    Install

    npm i @luxdamore/vue-cursor-fx

    DownloadsWeekly Downloads

    157

    Version

    1.6.2

    License

    MIT

    Unpacked Size

    216 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar