Новый Год не за горами и сайтостроители начали украшать свои сайты и придавать им праздничный вид. Самый распространенный вид украшательства - это снегопад. Такие снегопады создаются при помощи JavaScript кода.
Предлагаю вашему вниманию еще один вариант снегопада. Сделан он на базе скрипта снегопада без рисунков. Но, как выяснилось, есть люди, которым нужен снегопад из рисованных снежинок. Поэтому, я немного переделал исходный скрипт.
Итак, никаких дополнительных фреймворков не требуется. Скрипт работает на чистом JavaScript. Для размещения снегопада на сайте нужно вписать следующий код перед закрывающим тегом BODY.
Code
<script type="text/javascript">
// Количество снежинок (не ставьте слишком много - может затормозить браузер)
var snowmax = 50;
// Разность скорости слоев (рекомендуется от 0.3 до 2)
var sinkspeed = 0.6;
// Максимальный размер снежинок (пиксели)
var snowmaxsize = 30;
// Минимальный размер снежинок (пиксели)
var snowminsize = 10;
// Скорость падения снега (мс)
var snowspeed = 20;
// Зона снегопада
// 1 - снегопад на всем пространстве
// 2 - снегопад в левой части
// 3 - снегопад по центру
// 4 - снегопад в правой части
var snowingzone = 1;
var i = 0;
grphcs = new Array();
// Список ссылок к картинкам снежинок
grphcs[i++] = "http://szenprogs.ru/images/snow/snow1.gif";
grphcs[i++] = "http://szenprogs.ru/images/snow/snow2.gif";
grphcs[i++] = "http://szenprogs.ru/images/snow/snow3.gif";
grphcs[i++] = "http://szenprogs.ru/images/snow/snow4.gif";
grphcs[i++] = "http://szenprogs.ru/images/snow/snow5.gif";
grphcs[i++] = "http://szenprogs.ru/images/snow/snow6.gif";
// Не редактировать ничего ниже этой линии
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 randoms(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
};
function preloadimages(img){
image = new Image();
for(var i = 0; i < img.length; i++) image.src = img[i];
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.scrollHeight;
marginright = document.body.clientWidth - 15;
}
else if (ns6) {
marginbottom = document.body.scrollHeight;
marginright = window.innerWidth - 15;
}
var snowsizerange = snowmaxsize - snowminsize;
for (var 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].size = randommaker(snowsizerange) + snowminsize;
snow[i].style.width = snow[i].size + 'px';
snow[i].style.height = snow[i].size + 'px';
snow[i].style.zIndex = 1000;
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 (var 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()", snowspeed)
}
preloadimages(grphcs);
for(var i = 0; i <= snowmax; i++){
imgsrc = grphcs[randoms(0,grphcs.length-1)];
document.write("<img src='" + imgsrc + "' id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "'>");
}
if(browserok){
window.onload = initsnow;
}
</script>
Какие параметры за что отвечают - записано в скрипте. Думаю, разберетесь. Если же вам подойдут настройки по-умолчанию, то можете использовать сокращенный вид кода скрипта снегопада. Записывать его нужно перед закрывающим тегом BODY:
Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/snowfall1/snowfall.sp.js"></script>
Скрипт снегопада и картинки снежинок можете переместить на свой хост. При этом нужно будет поменять и адреса на свои.
На этом все. Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }
Google+
Скрипт снегопада с картинками
Скрипты
Скрипты, инструкции, справочники