Главная » Эффекты для сайта » Эффект падающего снега

Эффект падающего снега

2012-12-15 / Вр:18:12 / просмотров: 19849

Вот сижу на работе и думаю, скоро приближается Новый Год и наверняка веб-мастеру захочется установить на сайт красивый эффект падающего снега для сайта, это же будет в тему. Эффект работает с помощью HTML+JavaScript. Те, кто разбирается хоть немного в HTML, смогут установить эффект падающего снега и на движки CMS (WordPress, Joomla). Если возникнут трудности, пишите в комментариях, буду рад ответить. Вы уже хотите приступить к теме? Имейте терпение, не все сразу, я хочу немного выговориться. Если вам нравится тема «эффекты для сайта», подписывайтесь на RSS – ленту и будете всегда в курсе обновлений новостей. Вот, теперь приступим к эффекту «падающий снег».

Красивый эффект падающих снежинок для сайтов HTML+JavaScript.


<script language="JavaScript1.2">
 grphcs=new Array(6);
 Image0=new Image();
 Image0.src=grphcs[0]="images/snow1.gif";
 Image1=new Image();
 Image1.src=grphcs[1]="images/snow.gif";
 Image2=new Image();
 Image2.src=grphcs[2]="images/snow2.gif";
 Image3=new Image();
 Image3.src=grphcs[3]="images/snow3.gif";
 Image4=new Image();
 Image4.src=grphcs[4]="images/snow4.gif";
 Image5=new Image();
 Image5.src=grphcs[5]="images/snow5.gif";
 Image6=new Image();
 Image6.src=grphcs[6]="images/snow.gif";
 Amount=15;
 Ypos=new Array();
 Xpos=new Array();
 Speed=new Array();
 Step=new Array();
 Cstep=new Array();
 ns=(document.layers)?1:0;
 ns6=(document.getElementById&&!document.all)?1:0;
 if (ns){
 for (i = 0; i < Amount; i++){
 var P=Math.floor(Math.random()*grphcs.length);
 rndPic=grphcs[P];
 document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
 }
 }
 else{
 document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 for (i = 0; i < Amount; i++){
 var P=Math.floor(Math.random()*grphcs.length);
 rndPic=grphcs[P];//osw
 document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
 }
 document.write('</div></div>');
 }
 WinHeight=600;
 WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
 for (i=0; i < Amount; i++){
 Ypos[i] = Math.round(Math.random()*WinHeight);
 Xpos[i] = Math.round(Math.random()*WinWidth);
 Speed[i]= 1.2;
 Cstep[i]=0;
 Step[i]=Math.random()*0.1+0.2;
 }
 function fall(){
 var WinHeight=600;
 var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
 var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
 var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
 for (i=0; i < Amount; i++){
 sy = Speed[i]*Math.sin(90*Math.PI/180);
 sx = Speed[i]*Math.cos(Cstep[i]);
 Ypos[i]+=sy;
 Xpos[i]+=sx;
 if (Ypos[i] > WinHeight){
 Ypos[i]=-60;
 Xpos[i]=Math.round(Math.random()*WinWidth);
 Speed[i]=1;
 }
 if (ns){
 document.layers['sn'+i].left=Xpos[i];
 document.layers['sn'+i].top=Ypos[i]+hscrll;
 }
 else if (ns6){
 document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
 document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
 }
 else{
 eval("document.all.si"+i).style.left=Xpos[i];
 eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
 }
 Cstep[i]+=Step[i];
 }
 setTimeout('fall()',40);
 }
 window.onload=fall
 //-->
 </script>

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <title>Эффект падающего снега</title>
 </head>
 <body bgcolor="000000">
 </body>
 </html>

Предоставляю вашему вниманию красивый эффект падающих снежинок для сайтов. Вам нужно лишь скопировать готовый код и сохранить. Код полностью готов к использованию. Обратите внимание на подсказки в коде, вы можете смело менять и настраивать так, как считаете нужным.

Эффект падающего снега

<html>
 <title>
 Эффект падающего снега
 </title>
 <head>

<SCRIPT ENGINE="text/javascript">
 // Количество снежинок на странице (Ставьте в границах 30-40, больше не рекомендую)
 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="*";

// Скорость падения снега (рекомендую в границах от 0.3 до 2)
 var sinkspeed=0.3;

// Максимальный размер снежинки
 var snowmaxsize=42;

// Установите минимальный размер снежинки
 var snowminsize=8;

// Устанавливаем положение снега
 // Впишите 1 чтобы снег был по всему сайту, 2 только слева
 // 3 только по центру, 4 снег справа
 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>
 </head>
 <body bgcolor="#000">
 <p><font face="arial, helvetica" size="-2"><a href="/">Снег Powered by bloggood </a></font></p>
 </body>
 </html>

Вот и все. Рад был помочь с эффектом падающего снега. Если вы используете WordPress и вовсе не разбираетесь в кодировках сайта, могу вам посоветовать плагины с эффектом падающего снега. Заходим и читаем статью "плагины для WordPress с эффектом падающего снега".

Если вы используете Joomla, могу вам предложить модуль с эффектом падающего снега. Читаете про это здесь.