Skip to content

Latest commit

 

History

History
82 lines (56 loc) · 1.68 KB

README.md

File metadata and controls

82 lines (56 loc) · 1.68 KB

rainf

Javascript raindrops generator

  • All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE9+ and Edge).

Install

npm:

npm i ahmadtawakol/rainf --save

Usage

Include rainf with script tag:

<script src="rainf.min.js"></script>

Or use modules:

// ES6
import rainf from 'rainf';

// Commonjs
var rainf = require('rainf');

Simply init rainf like this:

rainf.init({
	size: 1,
	amount: 50
});

Default Options

Argument Type Default Value Description
dom HTMLDomElement, String document.body The element that raindrops canvas append to.
amount Number 100 Number of raindrops displayed at a time.
size Number 1 Size of raindrops.
speed Number 45 Vertical speed of raindrops. The larger, the raindrops drop faster.
color String '#fff' Color of raindrops. This option accepts HEX or RGB color code, such as "#fff", "#ffffff", "rgb(255,255,255)".
opacity Number 0.5 The opacity of raindrops.
zIndex Number null Position of the canvas layer. Set the layer front or back by changing this value.

More Examples

var rain = rainf.init();

// Adjust width and height of window:
window.onresize = function() {
  rain.resize();
};

// Reset the Rainf object and regenerate raindrops:
rain.reset();

// reset the Rainf object with new options:
rain.setOptions({
	amount: 80
});

// Change the vertical speed ( This will not reset the Rainf object )
rain.speed(2);

Licence

rainf is open source and released under the MIT Licence.

Copyright (c) 2018 ahmadtawakol