Скрипт — новогодние украшения, шарики, гирлянды, мотня и снежинки на сайт

Новый 2020 год уже через две недели и решили тут с одним клиентом навести небольшой новогодний декор на его сайте (мебель из сосны). И внедрить следующие скрипты:

1. Гирлянда с шариками (Новогодняя мотня — украшение было взято со страницы входа в почту Яндекса, а в ее исходном коде был комментарий к этой гирлянды <!— новогодняя мотня newyear.html —> вот так и появилось это обозначение )
2. Фоновая новогодняя музыка Jingle Bells
3. Падающие снежинки

А сейчас приступим к написанию инструкции, которая будет полезна не только мне, но и Вам если вы задались на своем сайте сделать новогодние украшения! Кстати эти способы кроссплатформенные и их можно применять на абсолютно любых сайтах под управлением таких CMS как:

• Opencart
• WordPress
• Bitrix
• Joomla
• и др

Анимированная елочная гирлянда с шариками

Первое что хочется всегда украсить на сайте в новый год это шапка сайта, С этого мы и начали! Тем более под руку попался интересный скрипт который использовался на сайте Яндекс. Кстати от туда и пошла мода называть это новогодняя мотня ))) так программист Яндекса закоментировал кусок кода отвечающий в Яндекса почте за вывод этой гирлянды сверху страницы.

Я буду рассматривать установку на основе сайта под управлением  OpenCart

HTML

В файл head расположенный /public_html/catalog/view/theme/ВашаТема/template/common

добавляем код сразу после тега body:

<!-- новогодняя мотня 2.1 -->  <div class="b-page_newyear">      <div class="b-page__content">          <i class="b-head-decor">        <i class="b-head-decor__inner b-head-decor__inner_n1">          <div class="b-ball b-ball_n1 b-ball_bounce" data-note="0"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n2 b-ball_bounce" data-note="1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n3 b-ball_bounce" data-note="2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n4 b-ball_bounce" data-note="3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n5 b-ball_bounce" data-note="4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n6 b-ball_bounce" data-note="5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n7 b-ball_bounce" data-note="6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n8 b-ball_bounce" data-note="7"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n9 b-ball_bounce" data-note="8"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          </i>              <i class="b-head-decor__inner b-head-decor__inner_n2">          <div class="b-ball b-ball_n1 b-ball_bounce" data-note="9"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n2 b-ball_bounce" data-note="10"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n3 b-ball_bounce" data-note="11"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n4 b-ball_bounce" data-note="12"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n5 b-ball_bounce" data-note="13"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n6 b-ball_bounce" data-note="14"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n7 b-ball_bounce" data-note="15"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n8 b-ball_bounce" data-note="16"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n9 b-ball_bounce" data-note="17"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>        </i>              <i class="b-head-decor__inner b-head-decor__inner_n3">          <div class="b-ball b-ball_n1 b-ball_bounce" data-note="18"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n2 b-ball_bounce" data-note="19"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n3 b-ball_bounce" data-note="20"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n4 b-ball_bounce" data-note="21"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n5 b-ball_bounce" data-note="22"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n6 b-ball_bounce" data-note="23"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n7 b-ball_bounce" data-note="24"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n8 b-ball_bounce" data-note="25"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n9 b-ball_bounce" data-note="26"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>        </i>              <i class="b-head-decor__inner b-head-decor__inner_n4">          <div class="b-ball b-ball_n1 b-ball_bounce" data-note="27"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n2 b-ball_bounce" data-note="28"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n3 b-ball_bounce" data-note="29"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n4 b-ball_bounce" data-note="30"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n5 b-ball_bounce" data-note="31"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n6 b-ball_bounce" data-note="32"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n7 b-ball_bounce" data-note="33"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n8 b-ball_bounce" data-note="34"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n9 b-ball_bounce" data-note="35"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>        </i>              <i class="b-head-decor__inner b-head-decor__inner_n5">          <div class="b-ball b-ball_n1 b-ball_bounce" data-note="0"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n2 b-ball_bounce" data-note="1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n3 b-ball_bounce" data-note="2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n4 b-ball_bounce" data-note="3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n5 b-ball_bounce" data-note="4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n6 b-ball_bounce" data-note="5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n7 b-ball_bounce" data-note="6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n8 b-ball_bounce" data-note="7"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n9 b-ball_bounce" data-note="8"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>        </i>              <i class="b-head-decor__inner b-head-decor__inner_n6">          <div class="b-ball b-ball_n1 b-ball_bounce" data-note="9"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n2 b-ball_bounce" data-note="10"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n3 b-ball_bounce" data-note="11"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n4 b-ball_bounce" data-note="12"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n5 b-ball_bounce" data-note="13"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n6 b-ball_bounce" data-note="14"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n7 b-ball_bounce" data-note="15"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n8 b-ball_bounce" data-note="16"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n9 b-ball_bounce" data-note="17"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>        </i>              <i class="b-head-decor__inner b-head-decor__inner_n7">          <div class="b-ball b-ball_n1 b-ball_bounce" data-note="18"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n2 b-ball_bounce" data-note="19"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n3 b-ball_bounce" data-note="20"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n4 b-ball_bounce" data-note="21"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n5 b-ball_bounce" data-note="22"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n6 b-ball_bounce" data-note="23"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n7 b-ball_bounce" data-note="24"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n8 b-ball_bounce" data-note="25"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_n9 b-ball_bounce" data-note="26"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>          <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>        </i>          </i>      </div>  </div>

CSS

Добавляем все в тот же файл head строку в которой подцепляешь стили для нашей гирлянды

<link rel="stylesheet" href="style.css">

JS

Сюда же в файл head подключаем и наш скрипт

<script src="script.js" defer></script>

текст скрипта ниже:

'use strict';    var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }    var Balls = function () {    function Balls(context, buffer) {      _classCallCheck(this, Balls);        this.context = context;      this.buffer = buffer;    }      _createClass(Balls, [{      key: 'setup',      value: function setup() {        this.gainNode = this.context.createGain();        this.source = this.context.createBufferSource();        this.source.buffer = this.buffer;        this.source.connect(this.gainNode);        this.gainNode.connect(this.context.destination);        this.gainNode.gain.setValueAtTime(1, this.context.currentTime);      }    }, {      key: 'play',      value: function play() {        this.setup();        this.source.start(this.context.currentTime);      }    }, {      key: 'stop',      value: function stop() {        var ct = this.context.currentTime + 1;        this.gainNode.gain.exponentialRampToValueAtTime(.1, ct);        this.source.stop(ct);      }    }]);      return Balls;  }();    var Buffer = function () {    function Buffer(context, urls) {      _classCallCheck(this, Buffer);        this.context = context;      this.urls = urls;      this.buffer = [];    }      _createClass(Buffer, [{      key: 'loadSound',      value: function loadSound(url, index) {        var request = new XMLHttpRequest();        request.open('get', url, true);        request.responseType = 'arraybuffer';        var thisBuffer = this;        request.onload = function () {          thisBuffer.context.decodeAudioData(request.response, function (buffer) {            thisBuffer.buffer[index] = buffer;            if (index == thisBuffer.urls.length - 1) {              thisBuffer.loaded();            }          });        };        request.send();      }    }, {      key: 'getBuffer',      value: function getBuffer() {        var _this = this;          this.urls.forEach(function (url, index) {          _this.loadSound(url, index);        });      }    }, {      key: 'loaded',      value: function loaded() {        _loaded = true;      }    }, {      key: 'getSound',      value: function getSound(index) {        return this.buffer[index];      }    }]);      return Buffer;  }();    var balls = null,      preset = 0,      _loaded = false;  var path = 'catalog/view/theme/skylight/stylesheet/hnw/audio/';  var sounds = [path + 'sound1.mp3', path + 'sound2.mp3', path + 'sound3.mp3', path + 'sound4.mp3', path + 'sound5.mp3', path + 'sound6.mp3', path + 'sound7.mp3', path + 'sound8.mp3', path + 'sound9.mp3', path + 'sound10.mp3', path + 'sound11.mp3', path + 'sound12.mp3', path + 'sound13.mp3', path + 'sound14.mp3', path + 'sound15.mp3', path + 'sound16.mp3', path + 'sound17.mp3', path + 'sound18.mp3', path + 'sound19.mp3', path + 'sound20.mp3', path + 'sound21.mp3', path + 'sound22.mp3', path + 'sound23.mp3', path + 'sound24.mp3', path + 'sound25.mp3', path + 'sound26.mp3', path + 'sound27.mp3', path + 'sound28.mp3', path + 'sound29.mp3', path + 'sound30.mp3', path + 'sound31.mp3', path + 'sound32.mp3', path + 'sound33.mp3', path + 'sound34.mp3', path + 'sound35.mp3', path + 'sound36.mp3'];  var context = new (window.AudioContext || window.webkitAudioContext)();    function playBalls() {    var index = parseInt(this.dataset.note) + preset;    balls = new Balls(context, buffer.getSound(index));    balls.play();  }    function stopBalls() {    balls.stop();  }    var buffer = new Buffer(context, sounds);  var ballsSound = buffer.getBuffer();  var buttons = document.querySelectorAll('.b-ball_bounce');  buttons.forEach(function (button) {    button.addEventListener('mouseenter', playBalls.bind(button));    button.addEventListener('mouseleave', stopBalls);  });    function ballBounce(e) {    var i = e;    if (e.className.indexOf(" bounce") > -1) {      return;    }    toggleBounce(i);  }    function toggleBounce(i) {    i.classList.add("bounce");    function n() {      i.classList.remove("bounce");      i.classList.add("bounce1");      function o() {        i.classList.remove("bounce1");        i.classList.add("bounce2");        function p() {          i.classList.remove("bounce2");          i.classList.add("bounce3");          function q() {            i.classList.remove("bounce3");          }          setTimeout(q, 300);        }        setTimeout(p, 300);      }      setTimeout(o, 300);    }    setTimeout(n, 300);  }    var array1 = document.querySelectorAll('.b-ball_bounce');  var array2 = document.querySelectorAll('.b-ball_bounce .b-ball__right');    for (var i = 0; i < array1.length; i++) {    array1[i].addEventListener('mouseenter', function () {      ballBounce(this);    });  }    for (var i = 0; i < array2.length; i++) {    array2[i].addEventListener('mouseenter', function () {      ballBounce(this);    });  }    var l = ["49", "50", "51", "52", "53", "54", "55", "56", "57", "48", "189", "187", "81", "87", "69", "82", "84", "89", "85", "73", "79", "80", "219", "221", "65", "83", "68", "70", "71", "72", "74", "75", "76", "186", "222", "220"];  var k = ["90", "88", "67", "86", "66", "78", "77", "188", "190", "191"];  var a = {};  for (var e = 0, c = l.length; e < c; e++) {    a[l[e]] = e;  }  for (var _e = 0, _c = k.length; _e < _c; _e++) {    a[k[_e]] = _e;  }    document.addEventListener('keydown', function (j) {    var i = j.target;    if (j.which in a) {      var index = parseInt(a[j.which]);      balls = new Balls(context, buffer.getSound(index));      balls.play();      var ball = document.querySelector('[data-note="' + index + '"]');      toggleBounce(ball);    }  });  

Скачать файлы в архиве — скачать

Новогодняя музыка на сайт

Новогодний музыкальный фон версия от 11.12.2020 года

На сегодняшний 2020 год, политика Гугл хрома и других браузеров запрещает запускать фоном музыку, но это обходится запуском ее через тег <video> с уменьшенной громкостью:

<video id="hny" loop="-1" autoplay="" name="media" preload="auto" hidden>  <source src="music.mp3" type="audio/mp3">  </video>    <script>      var audio = document.getElementById("hny");    		audio.volume = 0.2;    </script>

Версия от 2017 года

После того как гирлянды были установлены, очень не хватало новогодней музыки и мы ее установили и немного обработали, что бы не так сильно орала ))

За музыку будет отвечать строчка которую тоже подключаем в head или footer страницы

<bgsound src="sound/sound1-1.mp3" loop="1" volume="-5000" balance volume="0">

скачать новогоднюю музыку — Jingle Bells

Падающие снежинки на сайте

И когда уже такая красота, сейчас когда в Москве идет дождь))) захотелось снега!!!! Получите и снег!  напомню что все что я вам показываю очень удачно работает на сайте клиента под управлением Opencart 3 и даже не смотря на то, что эти скрипты немного подтормаживают сайт, все таки хочется немного волшебства!)

Поэтому подключаем в в head или footer страницы этот скрипт

<script type="text/javascript" src="catalog/view/javascript/snezhok/snezhok.js"></script>  

и вот вот сам код этого скрипта:

<script type="text/javascript">  var snowmax=35;  var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF","#FFFFFF","#EFF5FF")  var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");  var snowletter="*";  var sinkspeed=0.6;  var snowmaxsize=40;  var snowminsize=8;  var snowingzone=1;        var snow=new Array();  var marginbottom;  var marginright;  var timer;  var i_snow=0;  var x_mv=new Array();  var crds=new Array();  var lftrght=new Array();  var browserinfos=navigator.userAgent;  var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);  var ns6=document.getElementById&&!document.all;  var opera=browserinfos.match(/Opera/);  var browserok=ie5||ns6||opera;  function randommaker(range) {      rand=Math.floor(range*Math.random());      return rand;  }  function initsnow() {      if (ie5 || opera) {          marginbottom=document.body.clientHeight;          marginright=document.body.clientWidth;      }      else if (ns6) {          marginbottom=window.innerHeight;          marginright=window.innerWidth;      }      var 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].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;          }      }      var timer=setTimeout("movesnow()",50);  }  for (i=0;i<=snowmax;i++) {     document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px;'>"+snowletter+"</span>");  }  if (browserok) {      window.onload=initsnow;  }  </script>

или скачиваем скрипт падающие снежинки у меня с яндекс диска — скачать скрипт падающие снежинки

Вот таким нехитрым способом мы украсили сайт к новому 2020 году!!!

и если у вас возник вопрос:

• как сделать падающий снег на сайте?
• как сделать новогоднюю гирлянду на сайте?
• как включить фоном новогоднюю музыку при заходе на сайт?
• как украсить сайт на новый год?

На все эти вопросы вы найдете ответы на моем блоге!

С Наступающим Новым 2020 годом! Ура!!!!