Супербыстрый хостинг на SSD от 165р в месяц   •   Реклама
2 684 просм
8 комм
Поделиться:

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

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

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

8
комментариев
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Администратор  |  732

Паша Хокаге, попробуйте тогда вариант из той статьи - https://www.pandoge.com/moduli_i_skripty/4-luchshih-i-neobychnyh-effektov-padayuschego-snega-na-jquery-javascript-css3

Плавный многоуровневый эффект падающего снега на CSS3

Я думаю, что можете его взять как основу для решения вашего вопроса.

18.08 в 14:38
  • 0
Проверенный  |  4

Артем Мáлков, 99 на -1 собственно нечего не меняет, как вставить вместо просто точек свои картинки?

18.08 в 01:32
  • 0
Администратор  |  732

Паша Хокаге, для начала, Вы пробовали вариант выше? Делать нужно на том, что описано в статье.

18.08 в 00:25
  • 1
Проверенный  |  4

Артем Мáлков, дело в том что я вобще новичек и я не сильно понимаю как это сделать, если можно фулл код) хотя бы с несколько картинками(иконками) 2-3

18.08 в 00:01
  • 0
Администратор  |  732

Паша Хокаге, попробуйте в стиле .rain { значение:

z-index: 99;

замените на:

z-index: -1;

Может быть это решить Вашу проблему. Если нет, то предложу другой вариант.

17.08 в 23:08
  • 0
Проверенный  |  4

привет, скажи пожалуйста как сделать дождь из нескольких маленьких PNG рандомно появляющихся сверху и летящие вниз по всей ширине как фон!

17.08 в 20:07
  • 0
Проверенный  |  4

привет, скажи пожалуйста как сделать такой дождь только из нескольких маленький картинок, чтобы они рандомно вылетали. типо как в матрице символы только картинки.

17.08 в 20:05
  • 0
Гости  |  679

Прикольно. Но хорошо смотрится только на темном сайте.

20.04 в 15:17
  • 1
Подняться наверх
«Pandoge» - помощник веб-мастера