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

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

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

Просто добавьте нижеприведенный 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

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

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

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

Два примера создания версии для печати на той же странице сайта, где находится документ

Проверка показа рекламы на сайте

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

Параллакс подвал

Интересный эффект появления футера сайта из под страницы

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

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

Олег: 11.12.2023 в 18:51
Что-то код не работает...
Подключал и как отдельный файл и просто между
```
<body></body>
```
Ответить
- Олег: 11.12.2023 в 18:53
  
  Ответить
  - Alexander: 12.12.2023 в 07:18
    
    Дайте ссылку на сайт (можно в ТГ или ВК)
    В коде то снежинки появились.
    
    Ответить
    - Олег: 12.12.2023 в 11:29
      
      Да я уже убрал скрипт с сайта. Сделал то же самое но на чистом CSS. Сайт на DLE так что оформил это как плагин с админкой и возможностью включать при необходимости или по датам.
      На будущее, может понадобится для других сайтов вариант именно на JS, вопрос: Скрипт использует JQuery и если да то какую версию?
      У меня подозрение на то что моя версия JQuery не поддерживает данный скрипт... Но возможно я не прав.
      
      Ответить
      - Alexander: 12.12.2023 в 13:01
        
        Это на чистом JS, без jQuery
        
        Ответить
Виктор: 08.12.2023 в 18:19

Код работает.
Но не получается скрыть на мобильном. Не понял, какой id?

Ответить
- Alexander: 11.12.2023 в 07:57
  
  Их можно на CSS скрыть, задав снежинке класс или лучше в JS проверить ширину и запустить скрипт, если ширина экрана больше, например, 768 точек
  
  Ответить
Вася: 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
  
  Такая снежинка интереснее, обновил код 🙂
  
  Ответить

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

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

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