Снежинки для сайта

С наступлением зимы и Нового Года можно немного украсить свой сайт, добавив на него падающие снежинки.

Данный способ очень прост и заключается в добавлении всего одного скрипта на сайт.

Просто добавьте нижеприведенный JS на сайт либо файлом, либо скриптом внутри тега body:

////////////////////////
///////// Настройки
////////////////////////

// количество снежинок, которое будет на экране одновременно.
let snowmax=40

// Цвета для снежинок. Для каждой конкретной снежинки цвет выбирается случайно из этого массива.
let snowcolor=new Array("#b9dff5","#7fc7ff","#7fb1ff","#7fc7ff","#b9dff5")

// Шрифт для снежинок
let snowtype=new Array("Times")

// Символ (*) и есть снежинка, в место нее можно вставить любой другой символ.
let snowletter="&#10052;"

// Скорость движения снежинок (от 0.3 до 2)
let sinkspeed=0.4

// Максимальный размер для снежинок
let snowmaxsize=40

// Минимальный размер для снежинок
let snowminsize=10

// Зона для снежинок
// 1 для всей страницы, 2 в левой части страницы
// 3 в центральной части, 4 в правой части страницы
let snowingzone=1

////////////////////////
///////// Конец настроек
////////////////////////

let snow=new Array();
let marginbottom;
let marginright;
let timer;
let i_snow=0;
let x_mv=new Array();
let crds=new Array();
let lftrght=new Array();
function randommaker(range) {
	rand=Math.floor(range*Math.random());
    return rand;
}
function initsnow() {
	marginbottom = document.documentElement.clientHeight+50
	marginright = document.body.clientWidth-15
	let snowsizerange=snowmaxsize-snowminsize
	for (i=0;i<=snowmax;i++) {
		crds[i] = 0;
		lftrght[i] = Math.random()*15;
		x_mv[i] = 0.03 + Math.random()/10;
		snow[i]=document.getElementById("s"+i)
		snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
		snow[i].size=randommaker(snowsizerange)+snowminsize
		snow[i].style.fontSize=snow[i].size+'px';
		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
		snow[i].style.zIndex=1000
		snow[i].sink=sinkspeed*snow[i].size/5
		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
		snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
		snow[i].style.left=snow[i].posx+'px';
		snow[i].style.top=snow[i].posy+'px';
	}
	movesnow()
}
function movesnow() {
	for (i=0;i<=snowmax;i++) {
		crds[i] += x_mv[i];
		snow[i].posy+=snow[i].sink
		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
		snow[i].style.top=snow[i].posy+'px';
		
		if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
			snow[i].posy=0
		}
	}
	let timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
	document.body.insertAdjacentHTML("beforeend", "<span id='s"+i+"' style='pointer-events:none;user-select:none;position:fixed;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
window.onload=initsnow

////////////////////////

///////// Настройки

////////////////////////

// количество снежинок, которое будет на экране одновременно.

let snowmax=40

// Цвета для снежинок. Для каждой конкретной снежинки цвет выбирается случайно из этого массива.

let snowcolor=new Array("#b9dff5","#7fc7ff","#7fb1ff","#7fc7ff","#b9dff5")

// Шрифт для снежинок

let snowtype=new Array("Times")

// Символ (*) и есть снежинка, в место нее можно вставить любой другой символ.

let snowletter="❄"

// Скорость движения снежинок (от 0.3 до 2)

let sinkspeed=0.4

// Максимальный размер для снежинок

let snowmaxsize=40

// Минимальный размер для снежинок

let snowminsize=10

// Зона для снежинок

// 1 для всей страницы, 2 в левой части страницы

// 3 в центральной части, 4 в правой части страницы

let snowingzone=1

////////////////////////

///////// Конец настроек

////////////////////////

let snow=new Array();

let marginbottom;

let marginright;

let timer;

let i_snow=0;

let x_mv=new Array();

let crds=new Array();

let lftrght=new Array();

function randommaker(range) {

rand=Math.floor(range*Math.random());

return rand;

}

function initsnow() {

marginbottom = document.documentElement.clientHeight+50

marginright = document.body.clientWidth-15

let snowsizerange=snowmaxsize-snowminsize

for (i=0;i<=snowmax;i++) {

crds[i] = 0;

lftrght[i] = Math.random()*15;

x_mv[i] = 0.03 + Math.random()/10;

snow[i]=document.getElementById("s"+i)

snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]

snow[i].size=randommaker(snowsizerange)+snowminsize

snow[i].style.fontSize=snow[i].size+'px';

snow[i].style.color=snowcolor[randommaker(snowcolor.length)]

snow[i].style.zIndex=1000

snow[i].sink=sinkspeed*snow[i].size/5

if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)

snow[i].style.left=snow[i].posx+'px';

snow[i].style.top=snow[i].posy+'px';

}

movesnow()

}

function movesnow() {

for (i=0;i<=snowmax;i++) {

crds[i] += x_mv[i];

snow[i].posy+=snow[i].sink

snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';

snow[i].style.top=snow[i].posy+'px';

if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){

if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}

if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}

if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}

if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}

snow[i].posy=0

}

let timer=setTimeout("movesnow()",50)

}

for (i=0;i<=snowmax;i++) {

document.body.insertAdjacentHTML("beforeend", "<span id='s"+i+"' style='pointer-events:none;user-select:none;position:fixed;top:-"+snowmaxsize+"'>"+snowletter+"</span>")

}

window.onload=initsnow

Пример можно поглядеть на этой странице.

Не обязательно фиксировать снежинки в видимой области, как в примере, их можно пустить по всей странице. Для этого нужно заменить в строке 101 position:fixed на position:absolute, а marginbottom = document.documentElement.clientHeight+50 на marginbottom = document.body.clientHeight-snowmaxsize

Описание настроек даны в самом скрипте.

Опубликовано: 15.12.2017 / Обновлено: 11.12.2022
Рубрики: Весь сайт
Метки: JavaScript
27823 просмотра

Добавить комментарий:

Ваш комментарий отправлен!

Вася: 29.12.2022 в 00:55

Не работает скрипт.

Ответить
- Alexander: 29.12.2022 в 09:35
  
  У меня или у вас?
  
  Ответить
Иван: 12.12.2022 в 21:04

оооо актуальное даже сейчас, спс!

Ответить
Дмитрий: 18.11.2022 в 16:38

Огромная благодарность!!! супер просто ставиться:) отлично выглядит и задаёт настроение

Ответить
Дмитрий: 15.01.2022 в 14:08

Спасибо за скриптик) актуально даже спустя 5 лет))

Ответить
Azamat: 29.12.2021 в 15:14

Спасибо Вам! Классный скрипт! Понравилось то что можно задавать цвета, можно много что на изменять

Ответить
das: 23.02.2021 в 16:42

Здраствуйте. А вместо снежинки другую картинку поставить можно ? и как это делать ?

Ответить
- Alexander: 23.02.2021 в 17:07
  Там же стоят подсказки в скрипте 🙂
  
  // Символ (*) и есть снежинка, в место нее можно вставить любой другой символ. let snowletter="❄"
  
  Ставьте любой другой код или картинку, например:
  
  let snowletter="<img src='icon.png'>"
  Ответить
Михаил: 12.01.2021 в 08:36

Отлично, спасибо. Мне понравилось

Ответить
cupoma58: 03.01.2021 в 15:37

создал snow.js, подключил
<script type="text/javascript" src="snow.js"> </script>
перед </head> - не идёт снег!

Ответить
- Alexander: 03.01.2021 в 17:40
  Подправил код и описание в статье.
  Вам нужно добавить внутрь тега
  
  <body>
  
  Лучше всего в подвал, ибо снег не главное.
  Ответить
  - cupoma58: 03.01.2021 в 17:44
    
    Благодарю
    
    Ответить
Михаил: 29.12.2020 в 14:26

Прекрасное решение. Спасибо большое. Легко и здорово. Еще раз спасибо.

Ответить
Александр: 25.12.2020 в 21:22

Класно смотрится, но не понимаю как на wordpress установить, подскажите кто-нибудь!

Ответить
- Alexander: 25.12.2020 в 22:22
  
  Кидайте скрипт в любой уже подключенный в теме.
  Или в любое место шаблона, не забыв узазать что это скрипт.
  
  или напишите в ВК мне, как многие делают :)) Пока за ето денег не беру 🙂
  
  Ответить
Сергей: 14.12.2020 в 00:09

У снежинки с кодом &#10052 игнорится цвет на мобильных устройствах, например хром на телефоне отображает ее постоянно как бело-синий градиент. Зато окрашиванию поддается снежинка с кодом &#10054 или &#10057, точно не вспомню.

Ответить
- Alexander: 18.12.2020 в 18:45
  
  Эти коды вообще каждый браузер, как я понял, показывает как он хочет.
  Сейчас вот мозила обновилась, цвета пропали в BB-кодах, там символ &#9899
  Для теста вот он красный: ⚫, но не в мозиле, а в хроме...
  
  Ответить
Андрей: 18.11.2020 в 14:21

на битрикс как их установить?

Ответить
- Alexander: 18.11.2020 в 18:14
  
  Как и на любой другой.
  В шапку, в подвал, на нужную страницу, в любой скрипт на сайте и т.д.
  
  Ответить
Сергей: 21.12.2019 в 12:09

Здравствуйте, Александр.
Перелопатил десяток сайтов - ваши снежинки самые лучшие. Но у меня почему-то не запускаются. И кодом, и файлом на главную вставляю - ничего. Поможете?

Ответить
- Alexander: 22.12.2019 в 11:46
  
  Напишите в ВК мне
  
  Ответить
Евгений: 16.12.2019 в 14:01

Добрый день. Изменение цвета снежинок не работает.

Ответить
- Alexander: 18.12.2019 в 10:07
  
  Все работает 🙂
  Только если скрипт подключен файлом и смотрится в хроме, не забывайте про кеш.
  
  Ответить
Анна: 11.12.2019 в 01:03

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

Ответить
- Alexander: 11.12.2019 в 06:25
  
  Я с этой CMS не знаком, но принцип установки очень простой.
  У вас же как то подключена метрика, например. и т.д.
  Весь код помещаете в файл и подключаете его также в шаблоне.
  
  Если нужно подключить только на 1 страницу, то подключить можно прямо в статье.
  Если писать код в нее как он есть, визуальный редактор его испортит, а вот подключить файлом, думаю получится (не должен для админа блокироваться тег script.
  И соотв. вставлять надо в визуальном редакторе кодом, как то так:
  
  Ответить
  - Анна: 11.12.2019 в 12:42
    
    Огромное спасибо!
    
    Ответить
  - Анна: 11.12.2019 в 14:59
    
    Alexander, подскажите пожалуйста, как этот код поместить в файл?
    Пробовала по разному, делала как Вы написали, но ни как не получается...
    
    Ответить
    - Alexander: 11.12.2019 в 15:27
      
      У вас ВКонтакте есть?
      Напишите мне, так быстрее будет 🙂
      https://vk.com/xazbix
      
      Ответить
Ксения: 08.12.2019 в 19:43

Подскажите, что за плагин для снежинок?

Ответить
- Ксения: 08.12.2019 в 19:47
  
  Простите за глупый вопрос)) Затупила.
  
  Ответить
Юлия: 03.12.2019 в 16:27

Я дико извиняюсь, напишите пожалуйста, для чайника, куда это нужно вставлять, только конкретно!!! Спасибо

Ответить
- Alexander: 03.12.2019 в 17:52
  
  В любое место страницы 🙂
  В шапку, в подвал и т.д.
  Какой у вас движок? могу конкретнее подсказать.
  
  Ответить
  - Юлия: 04.12.2019 в 09:29
    
    Ой, Александр, негоже у девочки такие вопросы спрашивать!!! честно не знаю, нам дали шаблон сайта, немного инструкций и все(((( дальше я не знаю ничего
    
    Ответить
- Alexander: 04.12.2019 в 12:43
  
  Дайте ссылку на сайт 🙂
  
  Ответить
Kirill: 19.09.2019 в 16:58

document.write - крайне сомнительное решение, метод давно устарел.
document.write вставляет HTML-код на страницу сразу после себя. Точнее говоря, сразу после тега "script", внутри которого он расположен. И только в том случае, если документ еще не был загружен полностью. А если был? Тогда страница очищается и заменяется на, что было указано.

стоит его заменить на document.body.insertAdjacentHTML('beforeend', "");

Ответить
- Alexander: 25.09.2019 в 19:49
  
  Спасибо, подправил
  
  Ответить
Андрей: 09.12.2018 в 20:07

Можно вместо стандартной "звездочки" поставить специальный символ "снежинка" - ❄
код: &#10052

Ответить
- Alexander: 10.12.2018 в 16:31
  
  Такая снежинка интереснее, обновил код 🙂
  
  Ответить

Смотрите также:

Ночная тема для сайта

Полезные решения на CSS

Прелоадер, его создание и варианты оформления

Добавить комментарий:

Комментарии: