Кроссбраузерный эффект дождя на JavaScript + CSS
Сейчас осень в самом разгаре, и многие вебмастера, да и не только, тематически украшают свои сайты. С чем ассоциируется осень? Пара проливных дождей и опавших листьев.
Именно поэтому представляю вам свой уникальный скрипт дождя для вашего сайта.

Идею я позаимствовал у зарубежного мастера Ed Moore, но его реализация мне показалась немного странной, поэтому предлагаю свою.
1. Перед закрывающим тегом </body> подключите скрипт:
<script>
function random(min, max) {
var rand = min + Math.random() * (max + 1 - min);
rand = Math.floor(rand);
return rand;
}
for (var i=0; i<200; i++) {
document.getElementsByTagName('body')[0].innerHTML += '<i class="rain" style="left: '+random(-2000, 2000)+'px;transform: translate3d(0, 0, 0);animation-delay: '+(0.01 * i)+'s"></i>';
}
</script>
2. В файл стилей, в удобное для вас место, вставьте:
/** © 2017 Artem Malcov | https://www.pandoge.com/moduli-i-skripty/krossbrauzernyy-effekt-dozhdya-na-javascriptcss **/
.rain {
position: fixed;
width: 1px; /* Ширина капли */
height: 3px; /* Высота капли */
top: -3px;
background-color: #fff; /* Цвет капли */
animation: rain 1.2s linear infinite;
z-index: 99;
border-radius: 1px;
}
@keyframes rain {
to {
transform: translate3d(200px, 1000px, 0); /* Первое значение (200px) это направление дождя, где: 0 - вниз, положительное число - вправо, отрицательное - влево */
}
}
В этом стиле вы можете настроить цвет, ширину и высоту капли и другие параметры отображения – все они прокомментированы.
«1.2s» здесь – скорость дождя в секундах.
Если возникли вопросы – не стесняйтесь и задавайте их в комментариях.