Новый 2020 год уже через две недели и решили тут с одним клиентом навести небольшой новогодний декор на его сайте (мебель из сосны). И внедрить следующие скрипты:
- Гирлянда с шариками (Новогодняя мотня — украшение было взято со страницы входа в почту Яндекса, а в ее исходном коде был комментарий к этой гирлянды <!— новогодняя мотня newyear.html —> вот так и появилось это обозначение )
- Фоновая новогодняя музыка Jingle Bells
- Падающие снежинки
А сейчас приступим к написанию инструкции, которая будет полезна не только мне, но и Вам если вы задались на своем сайте сделать новогодние украшения! Кстати эти способы кроссплатформенные и их можно применять на абсолютно любых сайтах под управлением таких CMS как:
- Opencart
- WordPress
- Bitrix
- Joomla
- и др
Содержание
Анимированная елочная гирлянда с шариками
Первое что хочется всегда украсить на сайте в новый год это шапка сайта, С этого мы и начали! Тем более под руку попался интересный скрипт который использовался на сайте Яндекс. Кстати от туда и пошла мода называть это новогодняя мотня ))) так программист Яндекса закоментировал кусок кода отвечающий в Яндекса почте за вывод этой гирлянды сверху страницы.
Я буду рассматривать установку на основе сайта под управлением OpenCart
HTML
В файл head расположенный /public_html/catalog/view/theme/ВашаТема/template/common
добавляем код сразу после тега 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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | <!-- новогодняя мотня 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 строку в которой подцепляешь стили для нашей гирлянды
| 1 | <link rel="stylesheet" href="style.css"> |
JS
Сюда же в файл head подключаем и наш скрипт
| 1 | <script src="script.js" defer></script> |
текст скрипта ниже:
| 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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | '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> с уменьшенной громкостью:
| 1 2 3 4 5 6 7 | <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 страницы
| 1 | <bgsound src="sound/sound1-1.mp3" loop="1" volume="-5000" balance volume="0"> |
скачать новогоднюю музыку — Jingle Bells
Падающие снежинки на сайте
И когда уже такая красота, сейчас когда в Москве идет дождь))) захотелось снега!!!! Получите и снег! напомню что все что я вам показываю очень удачно работает на сайте клиента под управлением Opencart 3 и даже не смотря на то, что эти скрипты немного подтормаживают сайт, все таки хочется немного волшебства!)
Поэтому подключаем в в head или footer страницы этот скрипт
| 1 | <script type="text/javascript" src="catalog/view/javascript/snezhok/snezhok.js"></script> |
и вот вот сам код этого скрипта:
| 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 | <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 годом! Ура!!!!
Демки выкладывай. Так и подписывай «Демо» пример и спасибо большое за рабочий скрипт!
Успехов тебе!
в начале статьи я дал ссылку где это демо уже работает, но чтобы выидели вы и все остальные сделаю большие кнопки