Здесь мы в основном используем библиотеку JS Rainyday JS, которая очень просто и удобна в использовании, поэтому мы не говорим много глупости, просто прочитайте демо -код.
Кода -копия выглядит следующим образом:
<! Doctype html public "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style media = "screen">
тело {
переполнение: скрыто;
высота: 100%;
поля: 0;
Заполнение: 0;
}
img {
Ширина: 100%;
высота: 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">
функция run () {
var Image = document.getElementById ('founale');
image.onload = function () {
var Engine = новый дождь ({
Изображение: это,
});
Engine.rain ([[1, 2, 8000]]);
Engine.rain ([[3, 3, 0,88], [5, 5, 0,9], [6, 2, 1]], 100);
}
image.crossorigin = 'anonymous';
Image.src = 'http://i.imgur.com/n7etzfo.jpg';
}
</script>
<название> вау! </title>
</head>
<body onload = "run ();">
<img id = "background" src = "" />
</body>
</html>
Разве это не очень крутой эффект? Я надеюсь, что всем понравится.