@style
table td:not(:nth-child(3)) {
text-align: center;
}
@/style
_FOR VERSION 1.1.0 and 1.1.1_
# Getting started
## Load the script
``
## Configuration
Although the configuration is currently being stored in `window.rain.config`, some properties might not change dynamically.
This means, you can't do things like `window.rain.config.dropAmount--` on the fly expecting it to decrease the number of drops.
_(test.html)[./test.html] is currently using a hacky way to disable and enable lightnings on the fly._
_While it works, it's only used there for test purposes._
_Range_ = Array with length of 2, being the item at 0 the minimum of the range, and the item at 1 the maximum.
Array{n} = Array with length of _n_
### Values
| Name | Type | Description | Default |
| ---- | ---- | ----------- | ------- |
| dropAmount | Number | Amount of drops to be displayed on screen | 150
| dropLength | Range | Range from which it's randomly selected the length of each drops (height), in pixels | [ 30, 150 ]
| dropSpeed | Number | Multiplied by the length of the drop, to then create the speed of the drop | 1
| dropWidth | Number | Width of drop in pixels | 2
| dropColor | Array{3} | Color of drops, in RGB | [ 255, 255, 255 ]
| _same as above_ | Array of Array{3}s | Colors for each drop, chosen randomly | [ [ 255, 255, 255 ] ]
| canvasZIndex
might change to just 'zIndex' in the future | String _or_ Number | z-index CSS property set to the canvas | -2147483648
| prependTo | DOMElement | Element to which prepend the canvas | The page's `` element
| selectorString | String | Class added to the HTML and ID set to the element containing the canvas | 'its-raining-inside'
| isThunder | Boolean | Whenever or not to enable lightnings | true
| lightningInterval | Range | Time between lightnings, in milliseconds. The first lightning will happen on a average of the two values | [ 4000, 10000 ]
| rainSoundURL | String | Self-explanatory | 'assets/rain/bg.mp3'
| lightningSoundURL | String | Self-explanatory | 'assets/rain/lightnight.mp3'
| lightningFrames | Number | Amount of frames a lightning will happen (including fade in and fade out) | 7
| autoInject | Boolean | Whenever to inject the canvas and start the rain as soon as the script finishes loading | true
| fadeInFrames | Number | Amount of frames to use since the canvas was injected to slowly add drops and increase the rain volume. Useful for slowly introducing the rain to the user | 0
| mutedByDefault | Boolean | Whenever to mute the rain and lightnings by default | false
## Methods
| Name | Arguments | Function | Return type |
| ---- | --------- | -------- | ----------- |
| inject | [prependTo (DOMElement)] | Injects the canvas element inside `prependTo` (or `config.prependTo` if not defined) before any other element. | _void_
| isMuted | - | Whenever or not the rain and lightnings are muted | Boolean
| toggleMute | [mute (Boolean)] | Toggles between muting and unmuting the rain and lightnings. | Boolean (Whenever the sounds are muted or not)
| _onLoad_ | [windows.rain] | Set by the user, called once the script loads completely | _any_
## Example code
### Setup as an object
```javascript
window.rain = {
config: {
// configuration variables ...
},
onLoad: function(rain) {
// custom code ...
}
}
```
### Setup only `onLoad`
```javascript
window.rain = function(rain) {
// custom code ...
}
```
### Setup only configuration variables
```javascript
window.rainConfig = {
// configuration variables ...
}
```