Ripples 水波紋指令

Vue 自訂指令版本的水波紋效果

直接透過指令為元素添加水波紋效果，無需包裝元件

v-ripples-animation

基本的水波紋動畫指令，支援滑鼠/觸控互動

v-ripples-animation

滑鼠移動或點擊產生水波紋

程式碼範例

<!-- 基本水波紋動畫 -->
<div
  v-ripples-animation="{
    imageUrl: '/img/background.svg',
    resolution: 512,
    interactive: true
  }"
  class="ripples-container"
>
  Content here
</div>

v-ripples-auto-drops

自動產生隨機水滴效果的指令

v-ripples-auto-drops

自動產生隨機位置的水滴

程式碼範例

<!-- 自動水滴效果 -->
<div
  v-ripples-auto-drops="{
    interval: 300,
    dropRadius: 20,
    strength: 0.04,
    strengthVariance: 0.04,
    interactive: true
  }"
  class="ripples-container"
>
  Content here
</div>

指令參數說明

v-ripples-animation

Option	Type	Default	說明
`imageUrl`	String	-	背景圖片 URL
`resolution`	Number	256	水波紋解析度
`interactive`	Boolean	true	是否啟用互動

v-ripples-auto-drops

Option	Type	Default	說明
`interval`	Number	400	水滴間隔時間（毫秒）
`dropRadius`	Number	20	水滴半徑
`strength`	Number	0.04	水滴基礎強度
`strengthVariance`	Number	0.04	水滴強度隨機變化範圍