VueTxtAnime
It is a vue component, which contains many beautiful and free text effects.
Demo
Reference and Thanks
Installation
With NPM:
npm install vue-txt-animeWith PNPM:
pnpm install vue-txt-animeWith Yarn:
yarn add vue-txt-animeUsage
Global installation
main.js
import VueTxtAnime from 'vue-txt-anime'
createApp(App).use(VueTxtAnime).mount('#app')example
<script setup>
const options = {
effect: 'txt-an-1',
}
</script>
<template>
<VueTxtAnime :options="options" />
</template>Options
interface TxtAnimeOptions {
/**
* @default 'txt-an-1'
*/
effect?: 'txt-an-1' | 'txt-an-2' | 'txt-an-3' | 'txt-an-4' | 'txt-an-5' | 'txt-an-6' | 'txt-an-7' | 'txt-an-8' | 'txt-an-9'
/**
* @default 0
*/
delayStart?: number
/**
* @default 0.07
*/
delay?: number
/**
* @default 0.7
*/
duration?: number
/**
* @default true
*/
repeat?: boolean
/**
* @default 2
*/
repeatDelay?: number
/**
* @default false
*/
out?: number | boolean
text?: any[]
overlayBackground?: string
}