Rain effect for HTML content with Vuejs

vue-rain

Purpose

This is a vue component made for fun which renders slots in rain animation. It could be reallt useful if you want to create a shower effect with emojis.

Example

 <VueRain :rainSpeed="100" :rainFade="3000">
    <!-- Rendering water drop emoji using slots-->
    <div><p>&#128167;</p></div>
  </VueRain>

Props

There are currently the following props:

Prop	Description	Required	Default
rainSpeed	This prop determines the speed of which the slots gets render, the lesser the more slots gets created. Consider it like the lesser it is the more its going to rain. It is measured in milliseconds.	false	30
rainFade	This prop is used to specify the time after which the rendered slot should fade away. It is measured in milliseconds.	false	5000

Slots

There are currently the following slots:

Slot	Description	Example
default	This is default slot which will be rendered inside the component and the rain animation is added to this HTML.	It is in the above usage Example

Documentation

Coming soon…

Download Details:

Author: tabrezdn1

Source Code: https://github.com/tabrezdn1/vue-rain

#vue #vuejs #javascript