Как писался наш снег - ИльяШ - Блог - Шадолу - Вечный Зов

Блог пользователя ИльяШ

02.01.2014, 01:32

Как писался наш снег

Вчера, перед новым годом, решил добавить снежка на сайт. Но, не долго думая, на коленке, написал его сам. =)

Ниже будет код с описаниями.

Но с начала:
Снежинки у нас, это объект html со всеми свойствами. В данном случае, каждая снежинка - отдельный блок "div".
Снежинок у нас на странице летает все время 50, не больше, не меньше =)
Отталкиваясь от этого, начинаем!

// Создаем на странице блок в котором будут другие блоки - те самые снежинки, а также создаем кнопку для их включения и выключения

$('body').append('<div class="snow"></div><div class="snowsw" title="Снег"></div>');

// Функция обработки клика по кнопке выключения/включения снежинок

$('.snowsw').click(function(){
if(snwsw>0){
$('.snow div').fadeOut(200,function(){
snwsw=0;
scc('snow',0,365)
});
}else{
snwsw=1;
work();
$('.snow div').fadeIn();
scc('snow',1,365)
}
});

// Глобальные переменные, действие которых распространяется на всю программу

snw=[];
snwsw=0;
mh=$(window).height();
mw=$(window).width();

// Заполняем наш блок снежинками, ровно 50 штук

for(i=0;i<50;i++){
snw[i]=[];
rnd(i,1)
$('.snow').append('<div style="left:'+snw[i][1]+'px;width:'+snw[i][2]+'px;height:'+snw[i][2]+'px;border-radius:'+snw[i][2]/2+'px"></div>');
};

// Функция, которая будет у нас вызываться каждую единицу времени, тем самым приводя снежинки в движение

// Функция пересчета характеристик снежинок

function rnd(i,a){

// Высота

snw[i][0]=Math.random()*mh*a;

// Горизонталь

snw[i][1]=Math.random()*mw;

// Размер

snw[i][2]=rndm(3,3);

// Скорость

snw[i][3]=rndm(2,6);

// Размах

snw[i][4]=rndm(50,100);

// Скорость размаха

snw[i][5]=rndm(75,50)
};

// Функция для вычисления случайного числа, с параметрами диапазон и от

function rndm(a,b){
return Math.round(Math.random()*b+a)
};

// Функция вычисления синуса числа, нужна для того, чтобы снежинки совершали движение влево-вправо, а не падали вертикально

function sin(a,b){
return Math.round(Math.sin(a)*b)
};

// Функция чтения куков браузера, с помощью них запоминается включение/выключение

function gcc(a){
b=document.cookie;
c=b.indexOf(a+'=');
if(c>-1){
c+=a.length+1;
d=b.indexOf(";",c);
if(d<0){d=b.length};
e=b.slice(c,d)
}else{
e=''
};
return e
};

// Запись в куки

function scc(n,v,d){uSetCookie({name:n,value:v+'',path:'/',days:d})};

// Запуск снежинок при загрузке страницы, если нужно

$(document).ready(function(){
if(gcc('snow')==1){
snwsw=1;
work();
$('.snow div').fadeIn();
}
});

// Функция запуска снежинок

function work(){
(function wrk(){
if(snwsw>0){snow();
setTimeout(wrk,33)}
})()
}

А вот и CSS код:

.snow div{position:fixed;top:0;left:0;width:6px;height:6px;background:#fff;border-radius:3px;box-shadow:0 0 15px rgba(255,255,255,.2);z-index:9;display:none}
.snowsw{position:fixed;right:10px;bottom:10px;width:90px;height:90px;background:url('/newdesign/snow.png') no-repeat center;cursor:pointer}

Получилось по новогоднему.
Правда один браузер (FireFox), благодаря своей неповоротливости, воспроизводит движение довольно прерывисто, тут даже ослик (IE), выглядит лучше.

Просмотрели 309