Снежинки на сайт на javascript

Снежинки на сайт на javascriptСегодня на одном из сайтов заметил «снегопад». На страницах сайта подали снежинки. Мне это очень понравились и подняло настроение. И я решил сделать что-то подобное и себе на блог. Искать готовое решение я не стал, захотелось самому написать. Единственное что я поискал в сети — это цвета снежинок :). Что получилось вы можете посмотреть на блоге, а также в этой статье я хочу выложить исходники «снегопада», может быть кому-то еще пригодится этот код.

Код я подробно прокомментировал, надеюсь всем он будет понятен. А вот си сам код, для его работы необходимо подключить библиотеку 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();

Вот и все, всем новогоднего настроения

Рассказать друзьям:


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

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

*