text-expansion-animation

文字交融动画组件

🧰 安装

npm i text-expansion-animation

👼 使用

import { createApp } from 'vue'
import { TextExpansionAnimation } from 'text-expansion-animation'
import 'text-expansion-animation/style.css'

const app = createApp(App)
app.component('TextExpansionAnimation', TextExpansionAnimation)
app.mount('#app')

参数

{
  text?: string
  backgroundColor?: string
  color?: string
  fontSize?: number
  duration?: number
  delay?: number
  contrast?: number

  split?: 'none' | 'chars' | 'words'
  trigger?: 'mount' | 'visible' | 'manual'
  stagger?: number
  once?: boolean
  easing?: string
  effect?: 'blur' | 'glow' | 'pop'

  letterSpacingTo?: number
  blurFrom?: number
  blurTo?: number
  opacityFrom?: number
  opacityTo?: number
  yFrom?: number
  yTo?: number
  glowTo?: number
  glowColor?: string
}

示例：逐字 + 视口触发

<TextExpansionAnimation
  text="Scroll-triggered • staggered • pop"
  split="chars"
  trigger="visible"
  effect="pop"
  :stagger="28"
  :once="false"
/>

examples

License

MIT License © 2022 Simon He