Просто добавьте нижеприведенный JS на сайт либо файлом, либо скриптом внутри тега body
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
//////////////////////// ///////// Настройки //////////////////////// // количество снежинок, которое будет на экране одновременно. 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
Описание настроек даны в самом скрипте.
Не работает скрипт.
У меня или у вас?
оооо актуальное даже сейчас, спс!
Огромная благодарность!!! супер просто ставиться:) отлично выглядит и задаёт настроение
Спасибо за скриптик) актуально даже спустя 5 лет))
Спасибо Вам! Классный скрипт! Понравилось то что можно задавать цвета, можно много что на изменять
Здраствуйте. А вместо снежинки другую картинку поставить можно ? и как это делать ?
Там же стоят подсказки в скрипте 🙂
Ставьте любой другой код или картинку, например:
Отлично, спасибо. Мне понравилось
создал snow.js, подключил
<script type="text/javascript" src="snow.js"> </script>
перед </head> - не идёт снег!
Подправил код и описание в статье.
Вам нужно добавить внутрь тега
Лучше всего в подвал, ибо снег не главное.
Благодарю
Прекрасное решение. Спасибо большое. Легко и здорово. Еще раз спасибо.
Класно смотрится, но не понимаю как на wordpress установить, подскажите кто-нибудь!
Кидайте скрипт в любой уже подключенный в теме.
Или в любое место шаблона, не забыв узазать что это скрипт.
или напишите в ВК мне, как многие делают :)) Пока за ето денег не беру 🙂
У снежинки с кодом ❄ игнорится цвет на мобильных устройствах, например хром на телефоне отображает ее постоянно как бело-синий градиент. Зато окрашиванию поддается снежинка с кодом ❆ или ❉, точно не вспомню.
Эти коды вообще каждый браузер, как я понял, показывает как он хочет.
Сейчас вот мозила обновилась, цвета пропали в BB-кодах, там символ ⚫
Для теста вот он красный: ⚫, но не в мозиле, а в хроме...
на битрикс как их установить?
Как и на любой другой.
В шапку, в подвал, на нужную страницу, в любой скрипт на сайте и т.д.
Здравствуйте, Александр.
Перелопатил десяток сайтов - ваши снежинки самые лучшие. Но у меня почему-то не запускаются. И кодом, и файлом на главную вставляю - ничего. Поможете?
Напишите в ВК мне
Добрый день. Изменение цвета снежинок не работает.
Все работает 🙂
Только если скрипт подключен файлом и смотрится в хроме, не забывайте про кеш.
Ребята, подскажите где вставить данный скрипт на движке OKAY CMS? Пробовали на разных страницах, не получается.
Я с этой CMS не знаком, но принцип установки очень простой.
У вас же как то подключена метрика, например. и т.д.
Весь код помещаете в файл и подключаете его также в шаблоне.
Если нужно подключить только на 1 страницу, то подключить можно прямо в статье.

Если писать код в нее как он есть, визуальный редактор его испортит, а вот подключить файлом, думаю получится (не должен для админа блокироваться тег script.
И соотв. вставлять надо в визуальном редакторе кодом, как то так:
Огромное спасибо!
Alexander, подскажите пожалуйста, как этот код поместить в файл?
Пробовала по разному, делала как Вы написали, но ни как не получается...
У вас ВКонтакте есть?
Напишите мне, так быстрее будет 🙂
https://vk.com/xazbix
Подскажите, что за плагин для снежинок?
Простите за глупый вопрос)) Затупила.
Я дико извиняюсь, напишите пожалуйста, для чайника, куда это нужно вставлять, только конкретно!!! Спасибо
В любое место страницы 🙂
В шапку, в подвал и т.д.
Какой у вас движок? могу конкретнее подсказать.
Ой, Александр, негоже у девочки такие вопросы спрашивать!!! честно не знаю, нам дали шаблон сайта, немного инструкций и все(((( дальше я не знаю ничего
Дайте ссылку на сайт 🙂
document.write - крайне сомнительное решение, метод давно устарел.
document.write вставляет HTML-код на страницу сразу после себя. Точнее говоря, сразу после тега "script", внутри которого он расположен. И только в том случае, если документ еще не был загружен полностью. А если был? Тогда страница очищается и заменяется на, что было указано.
стоит его заменить на document.body.insertAdjacentHTML('beforeend', "");
Спасибо, подправил
Можно вместо стандартной "звездочки" поставить специальный символ "снежинка" - ❄
код: ❄
Такая снежинка интереснее, обновил код 🙂