Raining Effect

This original plugin is from http://rain-demo.heroku.com/. You can get further information from that site. Since the original plugin did NOT work for iWebsites we modified some parts of the original source code. This effect can NOT apply to the entire page. Only applicable for a specific element ID. (e.g. <div id="rainy-area">...) If you do NOT change the default element ID, 300px square (black) will be created. You can edit its size and style as well.

Preview

waiting rain...

Build your own

Choose several options.
Click "Apply these settings", select the entire codes. Then, press Command + C (Mac) or Control + C (Windows) to copy.
Paste the source code into HTML snippet in iWeb. (Non-iWeb users can also copy & paste each code in the <head> and <body> to each tag.)

* Optional settings

auto raining font family

raining area element ID raining text pausing text

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/raphael.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/rain.js"></script>
<style type="text/css">
.raining_effect_container {
	/*font_family*/font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;
	font-size:11px;
	color: gray;
	line-height:16px;
	white-space:nowrap;
	margin:0;
	padding:0;
	min-width:100px;
}

span.raining-button {display:block;width:16px;height:16px;padding: 0 0 0 20px;margin:0;background:url('https://lh3.googleusercontent.com/-1NynK0zy8aI/UXdEAm1MlaI/AAAAAAAAAJA/jtk0PHtW3tU/s32/playpause.gif') no-repeat;cursor: pointer;}
span.raining-play {background-position:0 -16px;}
span.raining-pause {background-position:0 0;}
</style>

<script type="text/javascript">
/*var_raining_start*/var raining_start=true;
/*var_raining_area_id*/var rainy_area_id="rainy-area";
var raining=null;

$(window).load(function(){$(".raining_effect_container .raining-button").click(function(){if($(this).hasClass("raining-pause")){if(raining){raining.clearDrops()}$(this).removeClass("raining-pause").addClass("raining-play").html(/*var_raining_stop_text*/"waiting rain...")}else{if(!raining){raining=new Rain(rainy_area_id,{angle:10,intensity:5,size:5})}else{raining.restartDrops()}$(this).removeClass("raining-play").addClass("raining-pause").html(/*var_raining_play_text*/"raining...")}});if(raining_start&&$(".raining_effect_container").is(":visible")){$(".raining_effect_container .raining-button").click()}});
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<!--RAINING AREA BEGIN--><div id="rainy-area" style="width:300px;height:300px;background:black;"></div><!--RAINING AREA END-->
<!--RAINING EFFECT BEGIN--><div class="raining_effect_container"><span class="raining-button raining-play">waiting rain...</span></div><!--RAINING EFFECT END-->
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, follow "Installation Guide"), and see if it works on your web browser.