Aquí usamos principalmente una biblioteca JS Rainyday, que es muy simple y conveniente de usar, por lo que no hablamos muchas tonterías, solo leemos el código de demostración.
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style media = "pantalla">
cuerpo {
desbordamiento: oculto;
Altura: 100%;
margen: 0;
relleno: 0;
}
img {
Ancho: 100%;
Altura: 100%;
}
</style>
<script src = "http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js" type = "text/javascript"> </script>
<script type = "text/javaScript">
function run () {
var image = document.getElementById ('fondo');
image.onload = function () {
var motor = new Rainyday ({
Imagen: esto,
});
motor.rain ([[1, 2, 8000]]);
motor.rain ([[3, 3, 0.88], [5, 5, 0.9], [6, 2, 1]], 100);
}
image.crossorigin = 'anónimo';
image.src = 'http://i.imgur.com/n7etzfo.jpg';
}
</script>
<title> ¡Guau! </title>
</ablo>
<Body onload = "run ();">
<img id = "fondo" src = "" />
</body>
</html>
¿No es un efecto genial? Espero que a todos les guste.