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

от Опубликовано

новый год украшения для сайта
Скоро-скоро новый год! Украсим наши сайты и блоги праздничными скриптами! Вот такую подборку скриптов я собрала. Для многих скриптов нужно подключить в шапке библиотеку jqery:

  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">
// <![CDATA[
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'>
//<![CDATA[

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. Снегопад. Вариант №3:
    <script type="text/javascript" src="http://www.skincorner.com/snow.js">
</script>
  7. Счетчик дней до Рождества (католического) в виде Санта Клауса:
    <iframe frameborder="0" marginheight="0" marginwidth="0"
    scrolling="no" height="256" width="256"
    src="https://www.christmaswebmaster.com/countdowns/santacount.html">
    </iframe>
  8. Счетчик дней до нового года
    <script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-88ad360f-1110-45bb-8772-e2cae52971b8"></div>
  9. Гирлянда в шапке сайта:
    <SCRIPT language=javascript type=text/javascript> 
//<![CDATA[ 
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>');

function COT(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate) 
{document.write('<div id="cot_tl_fixed">'); 
document.write('<><img src='+cot_tl_theLogo+' alt="Новогодние украшения (скрипты) для сайта" border="0"></a>'); 
document.write('</div>');}
//if(window.location.protocol == "http:") 
COT("http://www.honeybearplayhomes.com/resources/flashing%20christmas%20lights.gif", "SC2", "none"); 
//]]> 
</SCRIPT>
  10. Смотрите также виджет новогодних иконок социальных сетей

Опубликовано Иванова Наталья

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

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

    Ответить

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

    Ответить

    1. Тимур, вот код искорок курсора:
      <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>

      Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *