Ripples Directive
Vue Custom Directive for Water Ripple Effect
Add water ripple effects to elements directly via directives without wrapper components
v-ripples-animation
Basic water ripple animation directive with mouse/touch interaction
v-ripples-animation
Move or click to create ripples
Code Example
<!-- 基本水波紋動畫 -->
<div
v-ripples-animation="{
imageUrl: '/img/background.svg',
resolution: 512,
interactive: true
}"
class="ripples-container"
>
Content here
</div>v-ripples-auto-drops
Directive that automatically generates random water drops
v-ripples-auto-drops
Auto-generating random water drops
Code Example
<!-- 自動水滴效果 -->
<div
v-ripples-auto-drops="{
interval: 300,
dropRadius: 20,
strength: 0.04,
strengthVariance: 0.04,
interactive: true
}"
class="ripples-container"
>
Content here
</div>