Новогодние скрипты и украшения для сайта

0 33

Праздник к нам приходит, праздник к нам приходит… Новогодние и рождественские праздники только начинаются, но мы уже подготовили для вас наиболее полную коллекцию новогодних скриптов и украшений для сайтов. Данная подборка не перестанет быть актуальной и через год, и через два.

Поспешите украсить свой сайт, чтобы создать атмосферу Нового года.

Хо-хо-хо!

Ну что ж, поработаем над настроением)

1. Скрипт: Рождественский снегопад для сайта с сугробами

Содержание статьи:

Используя этот скрипт, вы погрузите свой сайт в атмосферу настоящего зимнего праздника. Его охватит снегопад, состоящий из красивых и праздничных снежинок. В нижней части сайта формируются сугробы (как же без них). Раз в 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-формате. Так что лучше не трогать без понимания принципов))

2. Украшение: Мерцающая гирлянда для uCoz

 

Украшение простое, но обратите внимание, что это GIF-картинка со стандартным белым фоном. Остальной контент сайта будет смещён ниже. И если цвет не совпадает полоса будет сильно контрастировать на фоне остального содержимого.

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

  <div style="height: 30px; background: url(https://uguide.su/new_year/2/girlianda_uguide_ru_1.gif) repeat-x 100%;"></div>  

3. Украшение: Еще одна гирлянда

 

Еще одна разновидность гирлянды, отличающаяся изящным и аккуратным исполнением. Станет идеальным элементом вашего сайта и создаст веселый и праздничный настрой у ваших посетителей.

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

  <div style="height: 30px; background: url(https://uguide.su/new_year/3/girlianda_uguide_ru_2.gif) repeat-x 100%;"></div>  

Формат такой же, как в предыдущем – с белой полосой сверху (над шапкой сайта).

4. Украшение: Елка для сайта

Новогодние скрипты и украшения для сайта

Конечно, помимо Деда Мороза, у Нового года есть и другие, принятые во всем мире символы. Главный среди них – новогодняя елка – может преобразить ваш сайт с помощью простого скрипта.

Добавить приведенный ниже код в нужное место на сайте, например в правом или левом сайдбаре.

  <div align="center"><img alt="" src="https://uguide.su/new_year/4/elka_ot_uguide_ru_2.gif" width="118" height="173"></div>  

5. Украшение: Еловая ветка с игрушками для ucoz

Новогодние скрипты и украшения для сайта

Елка и новогодние игрушки – первое, что встречается каждому из нас в канун Нового года. Создайте для своих посетителей атмосферу уникального праздника, разместив на сайте еловую ветку с игрушками с помощью простого скрипта.

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

  <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.

6. Скрипт: Разноцветная гирлянда для uCoz

Новогодние скрипты и украшения для сайта

Эта анимированная светящаяся гирлянда способна преобразить и украсить любой сайт. Яркие переключающиеся цвета создадут праздничное настроение у посетителей вашего сайта.

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

Если будут проблемы с отображением, нарастите приоритет слоя через 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>  

7. Скрипт: Новогодняя анимированная гирлянда со снегом и еловой веткой

Гирлянды, елочные ветки, новогодние игрушки и узорчатые снежинки – все это является неотъемлемыми составляющими новогоднего празднования. Зачем ограничиваться чем-то одним? Разместите на своем сайте сразу все для яркого и веселого настроения – в этом вам поможет этот простой скрипт.

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

  <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>  

8. Скрипт: Летящие вниз белые снежинки

Говорят, в природе не существует двух одинаковых снежинок, чьи узоры были бы схожи. Так же дела обстоят и со скриптами, отвечающими за их вывод. Еще один вариант праздничных анимированных снежинок для вашего сайта! 

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

<script src='https://uguide.su/new_year/8/snow11.js'></script>

9. Скрипт: Мелкий снежок на сайте

Медленно падающие узорчатые снежинки не так близки к реальному положению дел. Создайте для посетителей вашего сайта настоящую новогоднюю погоду, к которой многие из нас так привыкли – используя этот скрипт, вы устроите на своем сайте безостановочный снегопад.

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

<script type="text/javascript" src="https://uguide.su/new_year/9/snowfall.min.js"></script>

10. Скрипт: Снег из курсора

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

Обратите внимание, эффект может работать не везде – из-за конфликта приоритетов слоёв.

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

<script type="text/javascript" src="https://uguide.su/new_year/10/snowcursor.min.js"></script>

11. Скрипт: Курсор в форме снежинки со снегопадом

Этот скрипт подойдет тем, кто не готов довольствоваться общепринятыми решениями. Если снегопад, то из курсора, если курсор – то узорчатая снежинка!

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

  <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>  

12. Скрипт: Синие снежинки

Может, вы устали от бесконечных белых снежинок, заполонивших улицы и сайты в канун Нового года? Этот скрипт позволит вам привнести немного уникальности в праздничную атмфосферу вашего сайта, отобразив на нем падающие снежинки синего цвета.

Добавить приведенный ниже код в ПУ — Управление дизайном — Верхняя часть сайта.

<script src="https://uguide.su/new_year/12/ok4.js" type="text/javascript"></script>

13. Winternetizer – скрипт для получения реалистичного снега

Автор – Закари Джонсон. Скрипт написан в далёком 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="https://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>  

14. Скрипт для подключения снега к фону сайта или к другому контейнеру

Согласитесь, что снег, который перекрывает основной контент очень быстро начинает раздражать.

Выход на самом деле достаточно простой – привязать снегопад к какому-нибудь блоку или 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>  

15. Обновлённая новогодняя мотня Яндекса

Самое сложное напоследок. Это вариант для профи, способных разобраться с кодом и абсолютными путями на хостинге. Возможно, придётся также поковыряться в стилях 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.

В общем «после сборки обработать напильником». Но игра стоит свеч, это одно из самых запоминающихся решений: если провести курсором по шарикам, они начнут двигаться и издавать звуки.

Список ссылок на рождественские и новогодние проекты в CodePen

Будьте осторожны со скриптами, которые содержат кодирование в base64. Обычно это внешние скрипты или замаскированный Flash.

Снежные шары (можно использовать в виджетах)

  • Анимированный снежный шар с домиком для отдыха
  • Анимированный снежный шар со снеговиком внутри
  • Снежный шар со снеговиком и елкой

Санта-Клаус (тоже для виджетов и баннеров)

  • Хорошо детализированный CSS Санта-Клаус
  • Смеющийся CSS только Санта
  • Анимация бегущего Санты (при наведении курсора замедляется)
  • Анимированный Санта в самолётике

Ёлки (идеальны для боковой панели и CTA-блоков)

  • Анимированная новогодняя елка только на CSS (рисуется по восходящей, а затем рассыпается)
  • Рождественские огни для размещения на верхней части веб-сайта (мигающие, но без JS-кода, не забудьте поправить z-index, чтобы панель показывалась выше других элементов)
  • Рождественская елка в стиле ретро-пиксельного искусства (со снегом, подойдёт для виджета)
  • Вращающаяся неоновая рождественская елка (тоже без JS)

Другие элементы

  • Парящая рождественская хлопушка с посланием (простейший JS-скрипт, срабатывающий при наведении курсора, подойдёт для того, чтобы эффектно спрятать поздравление с новым годом)
  • Вращающийся рождественский подарок (крутая реализация секции или виджета с вращающимся подарком, на подарке нужно быстро кликнуть много раз, при открытии показывается стандартная картинка, её легко заменить на любую другую)
  • Подпрыгивающий подарок (для привлечения внимания)
  • Вращающаяся новогодняя елка (можно регулировать наклон и скорость вращения)
  • Экран загрузки на чистом CSS в виде леденца
  • Леденцовый прогресс-бар
  • Снеговик на чистом CSS
  • Полноценная web-игра с лабиринтом (управление стрелками, если пойти неправильно, начинаешь сначала, решение будет идеально для увеличения времени, проведённого пользователями на сайте).

Всех с праздниками! Надеемся данная подборка скриптов пригодится при подготовке ваших сайтов к Новому году.

  • Автор: Дмитрий Луценко

Источник: uguide.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.