Перейти к содержанию
Авторизация  
Подписчики 0
SHARK

Делаем Падающий Снег На Сайте С Помощью Javascript

Автор SHARK, в Web

Рекомендуемые сообщения

SHARK    39

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

1296757278_sneg.jpg

 

Всем читателям, привет! С наступлением Нового года все начали украшать елки, дома и т.д. Веб-мастера тоже не “сидят” на месте, они украшают свой сайт, меняют дизайн под зимний стиль.

 

Сегодня мы сделаем на нашем сайте падающий снег. Он будет реализован на языке JavaScripts.

 

Как обычно, для начала нам понадобиться чистый html - файл. В него мы вставим вот этот код:

 

<script language="JavaScript1.2" type="text/javascript">

grphcs=new Array(3); // количество изображений
// Список используемых изображений
Image0=new Image(); Image0.src=grphcs[0]="img/sneg1.gif";
Image1=new Image(); Image1.src=grphcs[1]="img/sneg2.gif";
Image2=new Image(); Image2.src=grphcs[2]="img/sneg3.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); // скорость падения снежинок ( оптимально - 70)
}
window.onload=fall
//-->
</script>

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

SHARK    39

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

Код JavaScript (вставлять между тегами <head> и </head>):

 

<script language="JavaScript">
// Максимальное количество снежинок
var snowmax=40;
var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF");
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");
var snowletter="*";
//Скорость 
var sinkspeed=0.5;
//Максимальный размер снежинок
var snowmaxsize=30;
//Минимальный размер снежинок
var snowminsize=8

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/);

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;
snow[i].style.color=snowcolor[randommaker(snowcolor.length)];
snow[i].sink=sinkspeed*snow[i].size/5;
snow[i].posx=randommaker(marginright-snow[i].size);
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);
snow[i].style.left=snow[i].posx;
snow[i].style.top=snow[i].posy;
 }
 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]);
snow[i].style.top=snow[i].posy;
if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])) {
  snow[i].posx=randommaker(marginright-snow[i].size);
  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+"'>"+snowletter+"</span>")
}
</script>

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Teams    30

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

ой нагрузка на проц и на сайт будет на ура :aggressive:

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

SHARK    39

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

Установка для Stressweb:

1. Скачиваем архив snow.zip

2. Копируем содержимое архива в папку вашего шаблона.

3. Открываем файл main.tpl и добавьте до тега

</head>

 

следующую строку:

<script type="text/javascript" src="{THEME}/js/snow.js"></script>

 

P.S. Чтобы убрать фишку "Полёт за мышкой"

 

Ищем:

this.followMouse = true;

 

Заменить на:

this.followMouse = null;

 

Для Index файла:

1. Скачиваем архив snow.zip

2. Копируем содержимое архива в папку вашего сайта.

3. Открываем файл Index.html и добавьте до тега

</head>

 

следующую строку:

<script type="text/javascript" src="/js/snow.js"></script>

 

Не забываем в корне сайта создать папку /js/ либо указать свой путь до файла snow.js

snow.zip

Поделиться сообщением

Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Авторизация  
Подписчики 0
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×
×
  • Создать...