@greenborn/vue-custom-cursor

Vue Custom Cursor

Este componente tiene como objetivo la posibilidad de definir un cursor personalizado

Instalación

npm i @greenborn/vue-custom-cursor@latest

Uso

En main.js

import { VueCustomCursor } from '@greenborn/vue-custom-cursor'; 
import '@greenborn/vue-custom-cursor/dist/library.css';

createApp(App).use(VueCustomCursor).mount('#app')

En App.vue incluir:

<CustomCursor :config='{
    highlighted_tags: [ "a", "button" ],
    transform_time: ".1s"
}'/>

Opciones de Configuración

Propiedad	Tipo de Dato	Valor por Defecto	Descripción
highlighted_tags	Array	[ "a", "button" ]	Define que etiquetas HTML serán resaltadas
transform_time	String	".2s"	Define el tiempo de la transformación CSS, en la practica implica modificar la velocidad de desplazamiento
click_effect_enabled	Boolean	true	Define si se habilita animación para efecto de click
click_effect_offset_x	Number	-10	Define desplazamiento en x del centro del efecto click
click_effect_offset_y	Number	-10	Define desplazamiento en y del centro del efecto click

Ej. en funcionamiento

• https://cv.greenborn.com.ar/luciano_vega

Change log

• 0.1.11 Se soluciona bug al click_effect_enabled en false
• 0.1.10: Se agrega efecto de click y se agregan propiedades de configuración relacionadas
• 0.1.9: En ancho de pantalla < 900px se oculta el cursor
• 0.1.7: Se agrega opción de configuración "transform_time"
• 0.1.5: Se agrega opción de configuración "highlighted_tags"
• 0.1.4: Versión funcional, se actualiza documentación