Random Lightning
Need to add some lightning to your page for Halloween? Use the following class to get started. Feel free to add methods for starting & stopping or setting the options through an object parameter!
/**
* @class Lightning
* @author Kevin Sweeney <kevin@vimeo.com>
* @license http://www.apache.org/licenses/LICENSE-2.0
*
* @constructor
* @param {Element} el The element to apply the
* lightning effect to (defaults to body).
*/
function Lightning(el) {
var source_el = el || document.body,
source_style = source_el.style,
source_bg_color = '#000',
flash_bg_color = '#ddd',
flash_delay = 60, // milliseconds
min_delay = 5, // seconds
max_delay = 12, // seconds
min_flashes = 2,
max_flashes = 3,
flash_count = -1;
function randomDelay() {
var delay = 1000 * (min_delay + (Math.floor(Math.random() * (max_delay - min_delay + 1))));
return delay;
}
function flashOn() {
source_style.backgroundColor = flash_bg_color;
}
function flashOff() {
source_style.backgroundColor = source_bg_color;
if (--flash_count > 0) {
setTimeout(flash, flash_delay);
}
else {
setTimeout(lightningStrike, randomDelay());
}
}
function flash() {
flashOn();
setTimeout(flashOff, flash_delay);
}
function lightningStrike() {
flash_count = min_flashes + Math.floor(Math.random() * (max_flashes - min_flashes + 1));
flash();
}
setTimeout(lightningStrike, randomDelay());
}
Then call it like so:
var lightning_storm = new Lightning();
Written by Kevin Sweeney
Related protips
2 Responses
Would love to see a demo, do you have a link you could include?
over 1 year ago
·
@mdeiters I slapped it in JSFiddle to play with: http://jsfiddle.net/XFzET/1/
It's quite cool!
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Javascript
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#