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

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

Узнайте также, как украсить ёлку на Яндекс вашей ёлочной игрушкой, сгенерированной нейросетью.

Большинство кодов устанавливается размещением html в элемент блога. На WordPress - это виджет HTML-код, на ucoz добавляем новый блок в конструкторе.

Новогодние скрипты 2024

  1. Фейерверк, праздничный салют для блога:
    <script type="text/javascript">//<![CDATA[ function write_fire(e){var t,n,r;stars[e+"r"]=createDiv("|",12);boddie.appendChild(stars[e+"r"]);for(t=bits*e;t<bits+bits*e;t++){stars[t]=createDiv("*",13);boddie.appendChild(stars[t])}}function createDiv(e,t){var n=document.createElement("div");n.style.font=t+"px monospace";n.style.position="absolute";n.style.backgroundColor="transparent";n.appendChild(document.createTextNode(e));return n}function launch(e){colour[e]=Math.floor(Math.random()*colours.length);Xpos[e+"r"]=swide*.5;Ypos[e+"r"]=shigh-5;bangheight[e]=Math.round((.5+Math.random())*shigh*.4);dX[e+"r"]=(Math.random()-.5)*swide/bangheight[e];if(dX[e+"r"]>1.25)stars[e+"r"].firstChild.nodeValue="/";else if(dX[e+"r"]<-1.25)stars[e+"r"].firstChild.nodeValue="\\";else stars[e+"r"].firstChild.nodeValue="|";stars[e+"r"].style.color=colours[colour[e]]}function bang(e){var t,n,r=0;for(t=bits*e;t<bits+bits*e;t++){n=stars[t].style;n.left=Xpos[t]+"px";n.top=Ypos[t]+"px";if(decay[t])decay[t]--;else r++;if(decay[t]==15)n.fontSize="7px";else if(decay[t]==7)n.fontSize="2px";else if(decay[t]==1)n.visibility="hidden";Xpos[t]+=dX[t];Ypos[t]+=dY[t]+=1.25/intensity[e]}if(r!=bits)setTimeout("bang("+e+")",speed)}function stepthrough(e){var t,n,r;var i=Xpos[e+"r"];var s=Ypos[e+"r"];Xpos[e+"r"]+=dX[e+"r"];Ypos[e+"r"]-=4;if(Ypos[e+"r"]<bangheight[e]){n=Math.floor(Math.random()*3*colours.length);intensity[e]=5+Math.random()*4;for(t=e*bits;t<bits+bits*e;t++){Xpos[t]=Xpos[e+"r"];Ypos[t]=Ypos[e+"r"];dY[t]=(Math.random()-.5)*intensity[e];dX[t]=(Math.random()-.5)*(intensity[e]-Math.abs(dY[t]))*1.25;decay[t]=16+Math.floor(Math.random()*16);r=stars[t];if(n<colours.length)r.style.color=colours[t%2?colour[e]:n];else if(n<2*colours.length)r.style.color=colours[colour[e]];else r.style.color=colours[t%colours.length];r.style.fontSize="13px";r.style.visibility="visible"}bang(e);launch(e)}stars[e+"r"].style.left=i+"px";stars[e+"r"].style.top=s+"px"}function set_width(){var e=999999;var t=999999;if(document.documentElement&&document.documentElement.clientWidth){if(document.documentElement.clientWidth>0)e=document.documentElement.clientWidth;if(document.documentElement.clientHeight>0)t=document.documentElement.clientHeight}if(typeof self.innerWidth!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<e)e=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<t)t=self.innerHeight}if(document.body.clientWidth){if(document.body.clientWidth>0&&document.body.clientWidth<e)e=document.body.clientWidth;if(document.body.clientHeight>0&&document.body.clientHeight<t)t=document.body.clientHeight}if(e==999999||t==999999){e=800;t=600}swide=e;shigh=t}var bits=80;var speed=33;var bangs=5;var colours=new Array("#03f","#f03","#0e0","#93f","#0cf","#f93","#f0c");var bangheight=new Array;var intensity=new Array;var colour=new Array;var Xpos=new Array;var Ypos=new Array;var dX=new Array;var dY=new Array;var stars=new Array;var decay=new Array;var swide=800;var shigh=600;var boddie;window.onload=function(){if(document.getElementById){var e;boddie=document.createElement("div");boddie.style.position="fixed";boddie.style.top="0px";boddie.style.left="0px";boddie.style.overflow="visible";boddie.style.width="1px";boddie.style.height="1px";boddie.style.backgroundColor="transparent";document.body.appendChild(boddie);set_width();for(e=0;e<bangs;e++){write_fire(e);launch(e);setInterval("stepthrough("+e+")",speed)}}};window.onresize=set_width//]]></script>
  2. Курсор в виде снега:
    <script type="text/javascript">var colour="blue";var sparkles=100;var x=ox=400;var y=oy=300;var swide=800;var shigh=600;var sleft=sdown=0;var tiny=new Array();var star=new Array();var starv=new Array();var starx=new Array();var stary=new Array();var tinyx=new Array();var tinyy=new Array();var tinyv=new Array();window.onload=function(){if(document.getElementById){var i,rats,rlef,rdow;for(var i=0;i<sparkles;i++){var rats=createDiv(3,3);rats.style.visibility="hidden";document.body.appendChild(tiny[i]=rats);starv[i]=0;tinyv[i]=0;var rats=createDiv(5,5);rats.style.backgroundColor="transparent";rats.style.visibility="hidden";var rlef=createDiv(1,5);var rdow=createDiv(5,1);rats.appendChild(rlef);rats.appendChild(rdow);rlef.style.top="3px";rlef.style.left="0px";rdow.style.top="0px";rdow.style.left="3px";document.body.appendChild(star[i]=rats)}set_width();sparkle()}}function sparkle(){var c;if(x!=ox||y!=oy){ox=x;oy=y;for(c=0;c<sparkles;c++)if(!starv[c]){star[c].style.left=(starx[c]=x)+"px";star[c].style.top=(stary[c]=y)+"px";star[c].style.clip="rect(0px, 5px, 5px, 0px)";star[c].style.visibility="visible";starv[c]=50;break}}for(c=0;c<sparkles;c++){if(starv[c])update_star(c);if(tinyv[c])update_tiny(c)}setTimeout("sparkle()",40)}function update_star(i){if(--starv[i]==25)star[i].style.clip="rect(1px, 4px, 4px, 1px)";if(starv[i]){stary[i]+=1+Math.random()*3;if(stary[i]<shigh+sdown){star[i].style.top=stary[i]+"px";starx[i]+=(i%5-2)/5;star[i].style.left=starx[i]+"px"}else{star[i].style.visibility="hidden";starv[i]=0;return}}else{tinyv[i]=50;tiny[i].style.top=(tinyy[i]=stary[i])+"px";tiny[i].style.left=(tinyx[i]=starx[i])+"px";tiny[i].style.width="2px";tiny[i].style.height="2px";star[i].style.visibility="hidden";tiny[i].style.visibility="visible"}};document['write']();function update_tiny(i){if(--tinyv[i]==25){tiny[i].style.width="1px";tiny[i].style.height="1px"}if(tinyv[i]){tinyy[i]+=1+Math.random()*3;if(tinyy[i]<shigh+sdown){tiny[i].style.top=tinyy[i]+"px";tinyx[i]+=(i%5-2)/5;tiny[i].style.left=tinyx[i]+"px"}else{tiny[i].style.visibility="hidden";tinyv[i]=0;return}}else tiny[i].style.visibility="hidden"}document.onmousemove=mouse;function mouse(e){set_scroll();y=(e)?e.pageY:event.y+sdown;x=(e)?e.pageX:event.x+sleft}function set_scroll(){if(typeof(self.pageYOffset)=="number"){sdown=self.pageYOffset;sleft=self.pageXOffset}else if(document.body.scrollTop||document.body.scrollLeft){sdown=document.body.scrollTop;sleft=document.body.scrollLeft}else if(document.documentElement&&(document.documentElement.scrollTop||document.documentElement.scrollLeft)){sleft=document.documentElement.scrollLeft;sdown=document.documentElement.scrollTop}else{sdown=0;sleft=0}}window.onresize=set_width;function set_width(){if(typeof(self.innerWidth)=="number"){swide=self.innerWidth;shigh=self.innerHeight}else if(document.documentElement&&document.documentElement.clientWidth){swide=document.documentElement.clientWidth;shigh=document.documentElement.clientHeight}else if(document.body.clientWidth){swide=document.body.clientWidth;shigh=document.body.clientHeight}}function createDiv(height,width){var div=document.createElement("div");div.style.position="absolute";div.style.height=height+"px";div.style.width=width+"px";div.style.overflow="hidden";div.style.backgroundColor=colour;return(div)}</script>
  3. Мигающая гирлянда:
    <script language=javascript type=text/javascript>//<![CDATA[
    function  COT(e,t,n,r){document.write('<div  id="cot_tl_fixed">');document.write("<><img src="+e+' alt="Новогодние украшения (скрипты) для сайта"  border="0"></a>');document.write("</div>")}var  Ovr2="";if(typeof  document.compatMode!="undefined"&&document.compatMode!="BackCompat"){cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft   + document.documentElement.clientWidth -  offsetWidth);}"}else{cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft   + document.body.clientWidth - offsetWidth);}"}if(typeof  document.compatMode!="undefined"&&document.compatMode!="BackCompat"){cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}"}else{cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}"}var  cot_tl_bodyCSS="* html {background: fixed;background-repeat:  repeat;background-position: left top;}";var  cot_tl_fixedCSS="#cot_tl_fixed{position:fixed;";var  cot_tl_fixedCSS=cot_tl_fixedCSS+"_position:absolute;";var  cot_tl_fixedCSS=cot_tl_fixedCSS+"top:0px;";var  cot_tl_fixedCSS=cot_tl_fixedCSS+"left:0px;";var  cot_tl_fixedCSS=cot_tl_fixedCSS+"clip:rect(0 100 85 0);";var  cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp;var  cot_tl_popCSS="#cot_tl_pop {background-color: transparent;";var  cot_tl_popCSS=cot_tl_popCSS+"position:fixed;";var  cot_tl_popCSS=cot_tl_popCSS+"_position:absolute;";var  cot_tl_popCSS=cot_tl_popCSS+"height:98px;";var  cot_tl_popCSS=cot_tl_popCSS+"width: 1920px;";var  cot_tl_popCSS=cot_tl_popCSS+"right: 120px;";var  cot_tl_popCSS=cot_tl_popCSS+"top: 20px;";var  cot_tl_popCSS=cot_tl_popCSS+"overflow: hidden;";var  cot_tl_popCSS=cot_tl_popCSS+"visibility: hidden;";var  cot_tl_popCSS=cot_tl_popCSS+"z-index: 99999;";var  cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;document.write('<style  type="text/css">'+cot_tl_bodyCSS+cot_tl_fixedCSS+cot_tl_popCSS+"</style>");COT("https://i.imgur.com/1sVQJsi.gif","SC2","none")//]]></script>
  4. Скрипт падающего снега:
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'type='text/javascript'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js'type='text/javascript'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js'type='text/javascript'></script><script type='text/javascript'>jQuery(document).ready(function($){$(document).snowfall({flakeCount:400,flakeColor:"#ffffff",flakeIndex:999999,minSize:1,maxSize:4,minSpeed:2,maxSpeed:8,round:true,shadow:false,})});</script>
  5. Падающие красивые крупные снежинки
    <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>
  6. Снегопад
    <script type="text/javascript" src="http://www.skincorner.com/snow.js"> </script>
  7. Виджет "падающие звеpдочки, снежинки, огоньки, листья, фонарики". Достаточно вставить код в виджет HTML/Javascript на блоггер или в виджет Текст на вордпресс.
    <script type="text/javascript">
      //Configure below to change URL path to the snow image
      var snowsrc="https://lh5.googleusercontent.com/-qTfnaEOmyws/TutpGkMPKUI/AAAAAAAAC_o/pE8yhnTmFDU/s32/ColoredStars.gif"
      // Configure below to change number of snow to render
      var no = 15;
      // Configure whether snow should disappear after x seconds (0=never):
      var hidesnowtime = 0;
      // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
      var snowdistance = "pageheight";
    ///////////Stop Config//////////////////////////////////
      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
        function iecompattest(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }
      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;
      if (ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = iecompattest().clientWidth;
        doc_height = iecompattest().clientHeight;
      }
      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://lh5.googleusercontent.com/-qTfnaEOmyws/TutpGkMPKUI/AAAAAAAAC_o/pE8yhnTmFDU/s32/ColoredStars.gif" : snowsrc
      for (i = 0; i < no; ++ i) {
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02 + Math.random()/10; // set step variables
        sty[i] = 0.7 + Math.random();     // set step variables
            if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
          } else {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
          }
        }
      }
      function snowIE_NS6() {  // IE and NS6 main animation function
        doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
            doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
        for (i = 0; i < no; ++ i) {  // iterate for every dot
          yp[i] += sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02 + Math.random()/10;
            sty[i] = 0.7 + Math.random();
          }
          dx[i] += stx[i];
          document.getElementById("dot"+i).style.top=yp[i]+"px";
          document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
        }
        snowtimer=setTimeout("snowIE_NS6()", 10);
      }
        function hidesnow(){
            if (window.snowtimer) clearTimeout(snowtimer)
            for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
        }
    if (ie4up||ns6up){
        snowIE_NS6();
            if (hidesnowtime>0)
            setTimeout("hidesnow()", hidesnowtime*1000)
            }
    </script>

    Теперь о настройках: var no = 15;--это количество падающих звёзд, можете указать своё число. Выделенное синим это URL адрес картинки. Вы можете заменить на свои изображения. Теперь можете выбрать себе нужную Вам картинку:

  8. Счетчик дней до Рождества (католического) в виде Санта Клауса
    <iframe frameborder="0" marginheight="0" marginwidth="0"
    scrolling="no" height="256" width="256"
    src="https://www.christmaswebmaster.com/countdowns/santacount.html">
    </iframe>
  9. Счетчик дней до нового года
    <script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-88ad360f-1110-45bb-8772-e2cae52971b8"></div>
  10. Смотрите также виджет новогодних иконок социальных сетей
  11. Скрипт Гирлянда с музыкальными шариками. Скачать. В архиве подробное описание установки.

Оцените статью
Добавить комментарий

  1. Maximilian Edelman

    СПАСИБО

    Ответить
  2. Элси

    Здорово! Гирлянда в левом углу мне больше всего понравилась! Спасибо!

    Ответить
  3. Mycrib

    Элси, мне тоже эта гирлянда больше всего нравится. Ненавязчивое украшение 😉

    Ответить
  4. Леонид

    Я бы не стал пихать себе на сайт скрипты, расположенные на сторонних ресурсах.
    А если их изменят?
    Проще на время вставить содержание из js скрипта в тот же гаджет. Предварительно взглянув на содержание. Снег например норм. Разницы никакой, но так безопасней.
    Т.е. сделать как сделано в последнем примере. Только картинку загрузить к себе на сайт.

    Ответить
  5. Mycrib

    Согласна, риск есть, что изменят. Долго это все.
    Пока работает.

    Ответить
  6. тимур немой

    Очень хорошо и интересно, а можно просьбу? Поделитесь пожалуйста скриптом искринок для курсора мышки, пожалуйста....)))

    Ответить
    1. Mycrib

      Тимур, вот код искорок курсора:
      <div style="position:absolute; left:-5555px; top:-5555px;"> <script src="http://www.cursor-switch.com/widgets/2/2914803393.js&quot; type="text/javascript" charset="UTF-8"></script></div>

      Ответить
  7. vasy kolt

    Спасибо за украшения для сайта, очень кстати подошло...

    Ответить
  8. VitAliy SidOrochev

    проверю !

    Ответить
  9. Nick Inet

    Поставил) С наступающим НГ! Главное - БЕСПЛАТНО!

    Ответить
  10. oleg

    большое СПАСИБО за javascript

    Ответить
  11. Алексей Валериевич

    Поставил искорки на сайт ok-vmeste.ru Спасибо Mycrib! Не знал, что такие бывают...

    Ответить