Поспешите украсить свой сайт, чтобы создать атмосферу Нового года.
Хо-хо-хо!
Ну что ж, поработаем над настроением)
Используя этот скрипт, вы погрузите свой сайт в атмосферу настоящего зимнего праздника. Его охватит снегопад, состоящий из красивых и праздничных снежинок. В нижней части сайта формируются сугробы (как же без них). Раз в 20 секунд сугробы убирает специальная машинка.
При желании можно настроить всё до мельчайших деталей.
Вставляется в тег head
<link href="https://uguide.su/new_year/1/snow.min.css" rel="stylesheet">
Вставляется в тег body
<script src="https://uguide.su/new_year/1/Snow.min.js"></script> <script> new Snow (); </script>
Вариант кода без сугробов (вставляется в тег body вместо обозначенного выше)
<script src="https://uguide.su/new_year/1/Snow.min.js"></script>
<script>
new Snow({
showSnowBalls: false,
});
</script>
За создание скрипта отдельное спасибо Александру Алаеву. Исходный код он выложил на GitHub.
Точечная настройка осуществляется через переменные:
<script>
new Snow ({
iconColor: ’#a6e7ff’, //цвет снежинок
iconSize: 15, //размер снежинок
icon: ’<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="#000000"><path d="M 6 6 L 6 26 L 26 26 L 26 6 L 6 6 z"/></svg>’, //тут задаётся иконка снежинки, изначально это текстовый символ, но при желании можно изменить на реальную картинку. Если заменяете SVG на реальную картинку, то управлять цветом и размером уже не получится
showSnowBalls: true, // тут включается или отключается показ сугробов, напишите вместо true false и они перестанут накапливаться в нижней части экрана
showSnowBallsIsMobile: true, //отдельная опция сугробов на мобилках
showSnowflakes: true, //включение или отключение снегопада
countSnowflake: 100, //количество снежинок на экране, не более 100
snowBallsLength: 10, // число сугробов, не более 10
snowBallIterations: 40, // итерации роста сугроба, от 10 до 40
snowBallupNum: 1, // пиксели роста в течение одной итерации, не более 3
snowBallIterationsInterval: 1000, // скорость роста сугроба в миллисекундах, то есть 1000 миллисекунд = 1 секунда
clearSnowBalls: 20000, // время, через которое машинка убирает сугробы, здесь это 20 секунд
});
</script>
Можно заменить даже иконку снегоуборочной машинки, делается это через переменную snowPlowImage, она объявляется по аналогии с icon. Но учтите, что исходное изображение, как и иконка снежинок, в SVG-формате. Так что лучше не трогать без понимания принципов))
Украшение простое, но обратите внимание, что это GIF-картинка со стандартным белым фоном. Остальной контент сайта будет смещён ниже. И если цвет не совпадает полоса будет сильно контрастировать на фоне остального содержимого.
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<div style="height: 30px; background: url(https://uguide.su/new_year/2/girlianda_uguide_ru_1.gif) repeat-x 100%;"></div>
Еще одна разновидность гирлянды, отличающаяся изящным и аккуратным исполнением. Станет идеальным элементом вашего сайта и создаст веселый и праздничный настрой у ваших посетителей.
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<div style="height: 30px; background: url(https://uguide.su/new_year/3/girlianda_uguide_ru_2.gif) repeat-x 100%;"></div>
Формат такой же, как в предыдущем – с белой полосой сверху (над шапкой сайта).
Конечно, помимо Деда Мороза, у Нового года есть и другие, принятые во всем мире символы. Главный среди них – новогодняя елка – может преобразить ваш сайт с помощью простого скрипта.
Добавить приведенный ниже код в нужное место на сайте, например в правом или левом сайдбаре.
<div align="center"><img alt="" src="https://uguide.su/new_year/4/elka_ot_uguide_ru_2.gif" width="118" height="173"></div>
Елка и новогодние игрушки – первое, что встречается каждому из нас в канун Нового года. Создайте для своих посетителей атмосферу уникального праздника, разместив на сайте еловую ветку с игрушками с помощью простого скрипта.
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<div style="position:absolute;top:0px;left:0px;width:300px;height:229px;background:url('https://uguide.su/new_year/5/vetka.png'); z-index: 1000;"></div>
Если вдруг еловая ветка всё равно не показывается, попробуйте повысить приоритет слоя через z-index, например, вместо 1000 укажите 1000000.
Эта анимированная светящаяся гирлянда способна преобразить и украсить любой сайт. Яркие переключающиеся цвета создадут праздничное настроение у посетителей вашего сайта.
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
Если будут проблемы с отображением, нарастите приоритет слоя через z-index:<тут ваше число>.
<style type="text/css"> #garland {position:absolute;top:0;left:0;background-image:url('https://uguide.su/new_year/6/christmas-lights.png');height:36px;width:100%;overflow:hidden;z-index:990000} #nums_1 {padding:100px} .garland_1 {background-position: 0 0} .garland_2 {background-position: 0 -36px} .garland_3 {background-position: 0 -72px} .garland_4 {background-position: 0 -108px} </style> <div id="garland" class="garland_4"> <div id="nums_1">1</div></div><script type="text/javascript"> function garland() { nums = document.getElementById('nums_1').innerHTML if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'} if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'} if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'} if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'} } setInterval(function(){garland()}, 600) </script>
Гирлянды, елочные ветки, новогодние игрушки и узорчатые снежинки – все это является неотъемлемыми составляющими новогоднего празднования. Зачем ограничиваться чем-то одним? Разместите на своем сайте сразу все для яркого и веселого настроения – в этом вам поможет этот простой скрипт.
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<style type="text/css"> #garland {position:absolute;top:0;left:0;background-image:url('https://uguide.su/new_year/7/christmas.png');height:36px;width:100%;overflow:hidden;z-index:990000} #nums_1 {padding:100px} .garland_1 {background-position: 0 0} .garland_2 {background-position: 0 -36px} .garland_3 {background-position: 0 -72px} .garland_4 {background-position: 0 -108px} </style> <div id="garland" class="garland_4"><div id="nums_1">1</div></div> <script type="text/javascript"> function garland() { nums = document.getElementById('nums_1').innerHTML if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'} if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'} if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'} if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'} } setInterval(function(){garland()}, 600) </script> <div style="position:absolute; top:0; left:0; z-index: 990001"> <img border="0" src="https://uguide.su/new_year/7/elka.png" align="left" /> </div> <script type="text/javascript" src="https://uguide.su/new_year/7/ok4.js"></script>
Говорят, в природе не существует двух одинаковых снежинок, чьи узоры были бы схожи. Так же дела обстоят и со скриптами, отвечающими за их вывод. Еще один вариант праздничных анимированных снежинок для вашего сайта!
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<script src='https://uguide.su/new_year/8/snow11.js'></script>
Медленно падающие узорчатые снежинки не так близки к реальному положению дел. Создайте для посетителей вашего сайта настоящую новогоднюю погоду, к которой многие из нас так привыкли – используя этот скрипт, вы устроите на своем сайте безостановочный снегопад.
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<script type="text/javascript" src="https://uguide.su/new_year/9/snowfall.min.js"></script>
Снегопад и падающие снежинки – это красиво и празднично, но возможность управления процессом кажется более интересной и привлекательной. С помощью этого скрипта вы устроите снегопад, исходящий из курсоров ваших посетителей.
Обратите внимание, эффект может работать не везде – из-за конфликта приоритетов слоёв.
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<script type="text/javascript" src="https://uguide.su/new_year/10/snowcursor.min.js"></script>
Этот скрипт подойдет тем, кто не готов довольствоваться общепринятыми решениями. Если снегопад, то из курсора, если курсор – то узорчатая снежинка!
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<script type="text/javascript" src="https://uguide.su/new_year/11/snowcursor.min.js"></script><style type="text/css">body, a:hover {cursor: url(https://uguide.su/new_year/11/snowcurser.cur), url(https://uguide.su/new_year/11/snowcurser.png), auto !important;}</style>
Может, вы устали от бесконечных белых снежинок, заполонивших улицы и сайты в канун Нового года? Этот скрипт позволит вам привнести немного уникальности в праздничную атмфосферу вашего сайта, отобразив на нем падающие снежинки синего цвета.
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<script src="https://uguide.su/new_year/12/ok4.js" type="text/javascript"></script>
Автор – Закари Джонсон. Скрипт написан в далёком 2009 году, но до сир пор отлично работает. Умеет вращать снежинки и автоматически менять направление ветра.
При желании можно поменять отдельные параметры в коде скрипта (если есть желание).
Из минусов – обязательно требуется устаревшая версия библиотеки jQuery (1.4.4).
Добавить приведенный ниже код в ПУ - Управление дизайном - Верхняя часть сайта.
<script src="https://uguide.su/new_year/13/jquery_1-4-4.min.js" type="text/javascript"></script> <script src="https://uguide.su/new_year/13/winternetizer.js" type="text/javascript"></script>
Минимизированная версия скрипта:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="https://uguide.su/new_year/13/winternetizer-combined-min.js" type="text/javascript"></script>
Согласитесь, что снег, который перекрывает основной контент очень быстро начинает раздражать.
Выход на самом деле достаточно простой – привязать снегопад к какому-нибудь блоку или div-контейнеру, например, к фону или подложке сайта.
Скрипт устанавливается легко, но потребуются специальные знания, чтобы найти нужный элемент вёрстки и прописать для него определённый идентификатор.
Вот так выглядит идентификатор – id="snow-animation-container"
А вот так его можно использовать с DIV-блоком:
<div id="snow-animation-container" style="width: 100%; height: 700px; background-color:black;"></div>
Далее подключается основной скрипт и jQuery (по необходимости) – в блок head.
<script src="https://uguide.su/new_year/14/jquery_3-2-1.min.js"></script> <script src="https://uguide.su/new_year/14/TweenMax.min.js"></script>
Там же можно добавить скрипт с настройками:
<script type="text/javascript">
$(document).ready(documentReady);
function documentReady()
{
var MAX_SNOW = 200; // количество снежинок
var MAX_SNOW_SIZE = 7; // размер снежинок
var MAX_SNOW_SPEED = 1; // скорость снежинок
snowStart();
function snowStart() {
console.log("// Snow animation start");
createSnows();
}
function createSnows() {
var container = $("#snow-animation-container");
for (var i = 0; i < MAX_SNOW; i++) {
var appendItem = getRandomItem(i);
container.append(appendItem);
var animateItem = $(".snow" + String(i));
var randomTime = Math.random() * MAX_SNOW_SPEED;
goAnimate(animateItem, i, randomTime);
goAnimate2(animateItem);
};
console.log("// Create snows");
}
function goAnimate(item, id, randomTime) {
TweenMax.to(item, randomTime, {css:{marginTop:"+=100"}, ease:Linear.easeNone, onComplete:function() {
var topPosition = item.css("margin-top").replace("px","");
if (topPosition > $(window).height()) {
changePosition(item);
randomTime = Math.random() * MAX_SNOW_SPEED;
goAnimate(item, id, randomTime);
}
else {
goAnimate(item, id, randomTime);
}
}});
}
function goAnimate2(item) {
var directionTime = 1 + Math.floor( Math.random() * 5 );
var randomDirection = 1 + Math.floor( Math.random() * 4 );
var delayTime = 1 + Math.floor( Math.random() * 3 );
if (randomDirection == 1){
TweenMax.to(item, directionTime, {css:{marginLeft:"+=100"}, ease:Linear.easeOut, onComplete:function() {
TweenMax.to(item, directionTime, {css:{marginLeft:"-=100"}, delay:delayTime, ease:Linear.easeOut, onComplete:function() {
goAnimate2(item);
}});
}});
}
else if(randomDirection == 2)
{
TweenMax.to(item, directionTime, {css:{marginLeft:"-=100"}, ease:Linear.easeOut, onComplete:function() {
TweenMax.to(item, directionTime, {css:{marginLeft:"+=100"}, delay:delayTime, ease:Linear.easeOut, onComplete:function() {
goAnimate2(item);
}});
}});
}
else if(randomDirection == 3)
{
TweenMax.to(item, directionTime, {css:{marginLeft:"+=100"}, ease:Linear.easeOut, onComplete:function() {
goAnimate2(item);
}});
}
else if(randomDirection == 4)
{
TweenMax.to(item, directionTime, {css:{marginLeft:"-=100"}, ease:Linear.easeOut, onComplete:function() {
goAnimate2(item);
}});
}
}
function changePosition(item) {
var _width = Math.floor( Math.random() * MAX_SNOW_SIZE );
var _height = _width;
var _blur = Math.floor( Math.random() * 5+2 );
var _left = Math.floor( Math.random() * ($(window).width() - _width) );
var _top = -$(window).height() + Math.floor( Math.random() * ($(window).height() - _height) );
item.css("width", _width);
item.css("height", _height);
item.css("margin-left", _left);
item.css("margin-top", _top);
item.css("-webkit-filter", "blur(" + String(_blur) + "px)");
item.css("-moz-filter", "blur(" + String(_blur) + "px)");
item.css("-o-filter", "blur(" + String(_blur) + "px)");
item.css("-ms-filter", "blur(" + String(_blur) + "px)");
item.css("filter", "blur(" + String(_blur) + "px)");
}
function getRandomItem(id) {
var _width = Math.floor( Math.random() * MAX_SNOW_SIZE );
var _height = _width;
var _blur = Math.floor( Math.random() * 5+2 );
var _left = Math.floor( Math.random() * ($(window).width() - _width) );
var _top = -$(window).height() + Math.floor( Math.random() * ($(window).height() - _height) );
var _id = id;
return getSmallSnow(_width, _height, _blur, _left, _top, _id);
}
function getSmallSnow(width, height, blur, left, top, id) {
var item = "<div class='snow" + id + "' style='position:absolute; margin-left: " + left + "px; margin-top: " + top + "px; width: " + width + "px; height: " + height + "px; border-radius: 50%; background-color: white; -webkit-filter: blur(" + blur +"px); -moz-filter: blur(" + blur + "px); -o-filter: blur(" + blur + "px); -ms-filter: blur(" + blur + "px); filter: blur(" + blur + "px);'></div>"
return item;
}
}
</script>
Самое сложное напоследок. Это вариант для профи, способных разобраться с кодом и абсолютными путями на хостинге. Возможно, придётся также поковыряться в стилях CSS…
Однажды Яндекс украсил с помощью такого скрипта свою онлайн-почту. Один из программистов скопировал код и вынес его в отдельный скрипт, назвав его «Новогодняя мотня». Название с тех пор прижилось.
Однако, была серьёзная проблема, оригинальный скрипт работал с использованием флеша (Flash). Уже другой программист переработал код и адаптировал его под современные браузеры, в которых поддержка Flash давно отключена.
Скачиваем архив с кодом с GitHub автора либо с нашего сервера.
Сохраняем в корне сайта и распаковываем.
Для CMS-систем это может быть специальный каталог для загрузок, например, у WordPress это /wp-content/uploads/, должно получиться что-то похожее: /wp-content/uploads/new-year-garland-v.2.1 (внутри будут файлы и ещё каталоги – со звуками и картинками).
Теперь добавляем код гирлянды внутри тега body (желательно в самом начале).
<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):
Обратите внимание путь до каталога со скриптом нужно заменить на актуальный (вместо «../wp-content/uploads/newyear-garland-master/script.js» введите свой вариант). То же самое нужно сделать для CSS-стилей.
<script src="https://ваш-сайт.ру/wp-content/uploads/new-year-garland-v.2.1/script.js" defer></script> <link rel="stylesheet" type="text/css" href="https://ваш-сайт.ру/wp-content/uploads/new-year-garland-v.2.1/style.css">
Осталось актуализировать путь до папки со звуками:
Откройте файл скрипта script.js и найдите переменную path. Вставьте здесь свой путь до каталога. Например,
var path = '/wp-content/uploads/new-year-garland-v.2.1/audio/';
При указании этого пути не нужно использовать домен!
Если ваша CMS-система использует сложную защиту от запуска несанкционированных скриптов, то нужно изучить документацию и выполнить все требования. Так, в WordPress, скорее всего придётся обращаться к вызову wp_enqueue_script().
Если блок с гирляндой сместил основной контент, нужно дополнительно вручную отредактировать файл стилей style.css.
В общем «после сборки обработать напильником». Но игра стоит свеч, это одно из самых запоминающихся решений: если провести курсором по шарикам, они начнут двигаться и издавать звуки.
Будьте осторожны со скриптами, которые содержат кодирование в base64. Обычно это внешние скрипты или замаскированный Flash.
Всех с праздниками! Надеемся данная подборка скриптов пригодится при подготовке ваших сайтов к Новому году.