Артём Мáлков

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

14 окт8 комм

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

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

Кроссбраузерный эффект дождя на 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» здесь – скорость дождя в секундах.

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

Рекомендуем к просмотру
Узнаем, с какой стороны элемента был введен курсор мыши на JavaScript
Статьи и советы
Самопечатающийся текст на JavaScript
Модули и скрипты
Скрываем div в случае, если он пустой на JavaScript/jQuery/CSS
Статьи и советы
8
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 1
    1066
      •  Команда Pandoge
    18 авг в 14:38

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

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

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

    • 1
    4
      •  Проверенный
    18 авг в 01:32

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

    • 2
    1066
      •  Команда Pandoge
    18 авг в 00:25

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

    • 1
    4
      •  Проверенный
    18 авг в 00:01

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

    • 1
    1066
      •  Команда Pandoge
    17 авг в 23:08

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

    z-index: 99;

    замените на:

    z-index: -1;

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

    • 1
    4
      •  Проверенный
    17 авг в 20:07

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

    • 1
    4
      •  Проверенный
    17 авг в 20:05

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

    • 2
    766
      •  Гости
    20 апр в 15:17

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

Подняться наверх
«Pandoge» - помощник вебмастера