Rainstorm is, you guessed it, another script to rain images and elements in the browser window. Now, get your unbrellas ! Rainstorm is a flexible object, allowing you to change the settings mid-rain via the console or a panel you created. To make the rain feel even more immersive, audio and lightning flash settings are also included.
You can find a live example @ https://sethclydesdale.github.io/rainstorm/
Rainstorm is easy to install, requiring only a single script. You can add this script directly in your <head> section, or at the end of your <body> tag. Depending on your preferences, a minified and unminified version are available to you.
Read on for more information on how to execute and modify Rainstorm.
Basic settings allow you to define the basic settings of a rain storm !
autorain allows you to specify whether or not the Rainstorm should start directly after the object is created. This takes a boolean value of true or false, setting it to true will automatically start the rain when the script executes. Note however, that the script should be placed in the <body> or a DOM ready event if this option is enabled.
Can be modified once the object is created.
rainStorm.autoRain = true; // enable autoRain
rainStorm.autoRain = false; // disable autoRainDoesn't have much effect once the object is created, as it's meant for runtime.
fixRain allows you to choose if the rain should be fixed to the viewpoint or not. If set to true, the rain will stay where it is, regardless of where you are on the page.
This setting can be modified after the object is created.
rainStorm.fixRain = true; // fix the rain to the screen
rainStorm.fixRain = false; // rain remains absoluterainRate specifies the spawn rate of new rain drops. Setting this to a low value will spawn droplets really faster, whereas a higher value will slow the spawn rate.
This setting can be modified after the object is created, but it requires stopping and starting the rainstorm to take effect.
rainStorm.rainRate = 300; // default rainRate, 300ms
rainStorm.rainRate = 50; // fast rainRate
rainStorm.rainRate = 1000;// slow rainRatefallRate specifies the falling speed of rain drops. Higher values have a slower fallRate whereas lower values have a faster fallRate.
This setting can be modified after the object is created.
rainStorm.fallRate = 50; // default fallRate, 50ms
rainStorm.fallRate = 10; // faster fallRate
rainStorm.fallRate = 300; // slower fallRatemaxDrops specifies the amount of rain drops that can be active in the DOM at once.
This setting can be modified after the object is created.
rainStorm.maxDrops = 30; // default rain drops allowed
rainStorm.maxDrops = 300; // Many rain drops !
rainStorm.maxDrops = 5; // Just a drizzle !image allows you to specifiy and image for the rain drops. If no image is defined, a CSS fallback is used instead.
This setting can be modified after the object is created, however, if there was no image to begin with, the page will need to be reloaded as the fallback is a DIV.
rainStorm.image = 'graphics/droplet-2.png'; // snow ?!Audio settings allow you to modify the audio settings of the storm !
The enabled setting allows you to switch the audio on and off.
This setting can be modified after the object is created.
rainStorm.audio.enabled = true; // enable the sound of the storm
rainStorm.audio.enabled = false; // disable the sound of the stormmp3 specifies the url to an mp3 audio file.
Can be modified after the object is created, but would require page reload if the storm was already running.
rainStorm.audio.mp3 = 'audio/rain.mp3'; // link to your mp3 filewav specifies the url to a wav audio file.
Can be modified after the object is created, but would require page reload if the storm was already running.
rainStorm.audio.wav = 'audio/rain.wav'; // link to your wav fileLightning settings allow you to harness the power of lightning.
enabled allows you to enable or disable the lightning flashes.
This setting can be modified after the object has been created.
rainStorm.lightning.enabled = true; // enable lightning flashes
rainStorm.lightning.enabled = false; // disable lightning flasheschances allows you to specifiy how frequently the lightning flashes occur. Setting the value low makes them more frequent, whereas setting the value high makes them less frequent.
This setting can be modified after the object is created.
rainStorm.lightning.chances = 50; // default chance
rainStorm.lightning.chances = 10; // high chance
rainStorm.lightning.chances = 500; // low chanceThese methods can be invoked at anytime.
start allows you to start the storm. If you have autoRain disabled, you can start the storm with this method.
rainStorm.start(); // start the rain stormstop allows you to stop the storm. Can be used for people that don't want to see it, or to reapply newly set settings.
rainStorm.stop(); // stop the rain stormon allows you to play the audio.
rainStorm.audio.on(); // play storm audiooff allows you to pause the audio.
rainStorm.audio.off(); // pause storm audioflash allows you to generate a flash of lightning.
rainStorm.lightning.flash(); // flash lightning