Дизайн Сезонное [Руководство] Создание новогоднего настроения | Перемещение снега на фоне.

its_niks · 30 ноя 2022

Всем привет, сегодня я для вас приготовил расширение, которое может добавить двигающийся снег на фон этого форума. Да здравствует новогоднее настроение!

Так, а теперь давайте это установим.

Chrome: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
Firefox: https://addons.mozilla.org/ru/firefox/addon/tampermonkey/

Переходим по ссылке: https://greasyfork.org/ru/scripts/455625-snow-lolzteam
И нажимаем "Установить этот скрипт".
Если вы хотите, чтобы снег летал на переднем плане, то ставьте эту версию: https://greasyfork.org/ru/scripts/455705-snow-lolzteam-2
Chrome: https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
Заходим в расширение, и нажимаем "Добавить новый сайт"

Далее мы видим два пустых поля:

Слева пишем этот код:

var particles_count = 125

window.addEventListener('load', function(){
var div = document.createElement('div');
div.id = "snow";
document.body.append(div);
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
script.onload = function(){
particlesJS("snow", {
"particles": {
"number": {
"value": particles_count,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"opacity": {
"value": 0.7,
"random": false,
"anim": {
"enable": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false
}
},
"line_linked": {
"enable": false
},
"move": {
"enable": true,
"speed": 5,
"direction": "bottom",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 300,
"rotateY": 1200
}
}
},
"interactivity": {
"events": {
"onhover": {
"enable": false
},
"onclick": {
"enable": false
},
"resize": false
}
},
"retina_detect": true
});
}
document.head.append(script);
});

JavaScript

var particles_count = 125 window.addEventListener('load', function(){ var div = document.createElement('div'); div.id = "snow"; document.body.append(div); var script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'; script.onload = function(){ particlesJS("snow", { "particles": { "number": { "value": particles_count, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "opacity": { "value": 0.7, "random": false, "anim": { "enable": false } }, "size": { "value": 5, "random": true, "anim": { "enable": false } }, "line_linked": { "enable": false }, "move": { "enable": true, "speed": 5, "direction": "bottom", "random": true, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": true, "rotateX": 300, "rotateY": 1200 } } }, "interactivity": { "events": { "onhover": { "enable": false }, "onclick": { "enable": false }, "resize": false } }, "retina_detect": true }); } document.head.append(script); });

А в поле CSS вставляем этот код:

#snow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: -1111111;
}

Код

#snow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: -1111111; }

Если вы хотите, чтобы снег был и на блоках с сообщениями, то вставьте это CSS:
#snow {

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 111;
}

Код

#snow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 111; }

И сохраняем. Заходим на сайт и проверяем, чтобы тумблер был активен.
Всем удачи и пока!