https://github.com/auranym/js-rain

Simple rain animations with JS web components
https://github.com/auranym/js-rain

Last synced: 10 days ago
JSON representation

Simple rain animations with JS web components

• Host: GitHub
• URL: https://github.com/auranym/js-rain
• Owner: auranym
• License: mit
• Created: 2024-08-23T17:06:47.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-05T03:41:44.000Z (5 months ago)
• Last Synced: 2024-11-18T01:14:36.089Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 99.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# js-rain: Simple rain animations with web components

This project was an exploration of

[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)

and the

[Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)

to add simple stylized rain to web pages with minimal setup.

You can see a demo of this effect [here](https://auranym.github.io/js-rain/demo/demo.html).

## Setup

Add the minified scripts found in the [dist directory](/dist)

to your page (via a `` tag, downloading directly, etc).

```html

<script type="application/javascript" src="https://cdn.jsdelivr.net/gh/auranym/js-rain@main/dist/splash-container.min.js">

```

Now you can use the following web components like standard `HTML` elements.

## Usage

### ``

Place anywhere within the page's `` and a rain animation will be started.

It will automatically adjust to your page's height and width. No extra setup

is required!

You can optionally specify the color of the droplets with the attributes

`color1` and `color2`.

#### Example

```html

```

### ``

This component animates simple splashes at the bottom of its specified area.

You should specify this area with CSS (through a stylesheet or with the `style`

attribute). This component behaves similarly to a `
`, and the animation

continues to work as the container is resized.


You should also define the number of splashes to display simultaneously with the

`splashes` attribute.

Due to performance reasons, this should be a smaller number (8 or less). However,

you can have multiple `` with minimal performance loss.

Optionally, you can define the color of the splashes with the `color` attribute.

#### Example

```html

```

## Improvements

- Use a better pseudo-random number generator than `Math.random()` so that splash particles

  do not line up as much.

- Consider using a `` instead of SVG masks for splash particles. This would need

  more container-sizing considerations though.