Случайный выбор победителя «Вконтакте»   •   Online-инструменты
700 просм
1 комм
Поделиться:

Кроссбраузерный эффект дождя на JavaScript+CSS

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

Именно поэтому представляю вам свой уникальный скрипт дождя для вашего сайта.

Кроссбраузерный эффект дождя на 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. В файл стилей, в удобное для вас место, вставьте:

/** Copyright (c) 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» здесь – скорость дождя в секундах.

Если возникли вопросы – не стесняйтесь и задавайте их в комментариях.

1
комментарий
DarkShin
20.04 в 15:17
Прикольно. Но хорошо смотрится только на темном сайте.
  • 0
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария