Сегодня на одном из сайтов заметил «снегопад». На страницах сайта подали снежинки. Мне это очень понравились и подняло настроение. И я решил сделать что-то подобное и себе на блог. Искать готовое решение я не стал, захотелось самому написать. Единственное что я поискал в сети — это цвета снежинок :). Что получилось вы можете посмотреть на блоге, а также в этой статье я хочу выложить исходники «снегопада», может быть кому-то еще пригодится этот код.
Код я подробно прокомментировал, надеюсь всем он будет понятен. А вот си сам код, для его работы необходимо подключить библиотеку jQuery:
// Снежинок на странице
var snowCountMax = 40;
// Массив цветов снега
var arrColor = ["#AAAACC", "#DDDDFF", "#CCCCDD", "#F3F3F3", "#F0FFFF", "#FFFFFF", "#EFF5FF"];
// Символ снежинки
var snowView = "*";
// Скорость падения (чем больше число, тем медленней)
var speed = 0.5;
// Максимальный размер
var sizeMax = 48;
// Минимальный размер
var sizeMin = 20;
var screenHeight;
var screenWidth;
var timer;
function initSnow() {
// размер экрана
screenHeight = $(document).height();
screenWidth = $(document).width();
var sizeRange = sizeMax - sizeMin;
for(i = 0; i <= snowCountMax; i++){
var sizeFont = Math.floor(sizeRange*Math.random())+sizeMin; // случайный размер снежинки
var posx = Math.floor((screenWidth-sizeFont*2)*Math.random()); // снежинки по всей оси X
var posy = Math.floor((screenHeight-sizeFont*2)*Math.random()); // снежинки по всей оси Y
var randColor = arrColor[Math.floor(arrColor.length*Math.random())]; // случайный цвет
var size = Math.floor(sizeRange*Math.random()) + sizeMin;
span = $("#snow_"+i); // снежинка по порядку
span.css('fontSize', sizeFont+"px"); // задаем ей размер
span.css('color', randColor); // цвет
span.attr('size', size); // в атрибут сохраняем скорость этой снежинки
span.attr('speed', speed*sizeFont/5); // в атрибут сохраняем скорость этой снежинки
span.attr('posx', posx); // в атрибут пишем положение по X
span.attr('posy', posy); // в атрибут пишем положение по Y
span.css('left', posx+"px"); // задаем положение по X
span.css('top', posy+"px"); // задаем положение по Y
}
moveSnow();
}
// падение снежинок
function moveSnow() {
for(i = 0; i <= snowCountMax; i++){
span = $("#snow_"+i); // снежинка по порядку
var posy = parseInt(span.attr('posy')) + parseInt(span.attr('speed'));
var posx = parseInt(span.attr('posx'));
var size = parseInt(span.attr('size'));
var margin = posx + Math.floor(Math.random()*4)-2; // колыхание по X
span.animate({
top: posy+"px",
left: margin + "px"
}, 70);
span.attr('posy', posy);
span.attr('posx', margin);
var sizeRange = sizeMax - sizeMin;
var sizeFont = Math.floor(sizeRange*Math.random()) + sizeMin; // случайный размер снежинки
if(posy >= (screenHeight-sizeFont*2)){ // если снежинка полностью опустилась
posx = Math.floor((screenWidth-sizeFont*2)*Math.random()); // снежинки по всей оси X
span.attr('posx', posx);
span.attr('posy', 0);
span.css('fontSize', sizeFont+"px"); // меняем размер
}
}
var timer = setTimeout("moveSnow()", 70);
}
// создаем на странице снежинки
for (i = 0; i <= snowCountMax; i++){
$('body').append("<span id='snow_"+i+"' style='position: absolute;'>"+snowView+"</span>");
}
// запускам снегопад
initSnow();
Вот и все, всем новогоднего настроения

(2 оценок, среднее: 4,00 из 5)