Падающий снег на сайт

Падающий снег на jQuery или html шаблон Новогодней поздравительной открытки

Доброе время суток и с наступающим. В преддверии Нового года я хочу с вами поделить очень легким, красивым и неприхотливым плагином падающего снега. Этот скрипт действительно очень легкий и спокойно помещается в html файле, не затрудняя работы с самим html кодом сайта. Правда его можно и вынести в отдельный файл. Но для удобства я сделал все в одном файле.

Тут мало что можно сказать, лучше посмотреть демонстрацию этого падающего снега. Вдобавок там очень красивый фон и надпись "С Новым годом", написанная красивым шрифтом "Lobster" от Google. Вы с легкостью этот файл можете превратить в интернет открытку с поздравлением.

Подключение скрипта падающих снежинок на готовый сайт

1. Подключаем библиотеку jQuery

Подключается она так: между тегами <head> и  </head> вставляете следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

2. Подключаем стили

Вставьте css-код в свой css файл (обычно это style.css):

#canvas {
border: 1px solid black;
position: absolute;
z-index: 10000;
}


#flake {
color: #fff;
position: absolute;
font-size: 25px;
top: -50px;
}

3. Создаем файл snow.js

Создадим файл snow.js и вставляем туда следующий javascript-код:

<script>
var t = setInterval(
function(){
var documentHeight  = $(document).height();
var startPositionLeft  = Math.random() * $(document).width() - 100;
var startOpacity = 0.5 + Math.random();
var sizeFlake = 10 + Math.random() * 20;
var endPositionTop = documentHeight - 40;
var endPositionLeft = startPositionLeft - 100 + Math.random() * 200;
var durationFall = documentHeight * 10 + Math.random() * 5000;
$('#flake')
.clone()
.appendTo('body')
.css(
{
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake
}

)
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function() {
$(this).remove()
}
);
}, 500);



var snow = {};
var snowflex = {};
snowflex.create  = function(){
var flex = document.createElement('div');
flex.innerHTML   = "&#10052;";
flex.style.fontSize  = 10 + Math.random() * 20 + 'px';
flex.style.top  = - 50 + Math.random() * 20 + 'px';
flex.style.left  = Math.random() * 1500 + 'px';
flex.style.position  = "absolute";
flex.style.color  = "#F3F3F3";
flex.style.opacity = Math.random();
document.getElementsByTagName('body')[0].appendChild(flex);
return flex;
};


snow.snowflex = function(){
var flex = snowflex.create();
var x = -1 + Math.random() * 2;
var t = setInterval( 
function(){
flex.style.top  = parseInt(flex.style.top) +  5 + 'px';
flex.style.left = parseInt(flex.style.left) +  x + 'px';
if (parseInt(flex.style.top) > 1500) {
clearInterval(t);
document.getElementsByTagName('body')[0].removeChild(flex);
} 
}, 45 + Math.random() * 20);
};

snow.storm = function(){
var t = setInterval(
function(){
snow.snowflex();
}, 500);
};

//snow.storm();

var fog = {};
fog.draw = function(ctx, x, y){
ctx.fillStyle = "rgba( 255, 255, 255, " + Math.random() + " )";
ctx.arc( x, y, 10,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
};

fog.start = function(){
var ctx = document.getElementById('canvas').getContext("2d");
var x = 0;
var y = 0;
var t = setInterval( 
function(){
x = 300 + 300*Math.sin(x);
y = 300 + 300* -Math.cos(x);
x += 2;
fog.draw(ctx, x, y);
}, 100);
};

//fog.start();
</script>

Подключаем js-файл в <head>:

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

4. Вставляем html код

Ну и осталось самое главное - вставить html код падающего снега в любое места в <body>:

<div id = "flake">&#10052;</div>

Если вы все сделали правильно, то у Вас на сайте начнет падать снег.

Подключение фоновой картинки, большого заголовка и падающих снежинок

Этот вариант отличается тем, что у него есть фоновое изображение и большой заголовок «С Новым годом». Подключить этот вариант скрипта падающего снега на сайт достаточно просто. Нужно:

1. Скачиваем архив и его разархивировируем

2. Подключаем библиотеку jQuery

Обязательно подключить библиотеку jQuery (не обязательно, если у Вас уже подключена эта библиотека). Подключается она так: между тегами <head> и  </head> вставляете следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

3. Подключаем шрифт "Lobster"

Аналогично подключению бибилиотеки jQuery, подключаем шрифт для нашей надписи "С Новым годом":

<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Естественно, если Вам не нужна эта надпись и шрифт, вы можете его не подключать, но тогда и в css уберите у атрибута H1 "font-family: 'Lobster', cursive;", или замените его на свой шрифт

4. Подключаем стили

Вариант А. Вставьте css-код в свой css файл. Вот код:

img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
}

h1 {
font-family: 'Lobster', cursive;
color: #FFF;
font-size: 90px;
text-align: center;
line-height: 95px;
font-weight: normal;
margin-top: 300px;
text-shadow: 5px 5px 5px #000;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}


html, body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 16px;
padding: 0;
margin: 0;
color: #333;
}


.bar {
background-color: #111;
color: #f0f0f0;
box-shadow: 0px 0px 2px #333;
line-height: 25px;
padding: 0px 20px;
opacity: 0.7;
}

.bar:hover {
opacity: 1;
}

.bar a {
color: #DDD;
}

.bar a:hover {
color: #FFFFFF;
}

a { color: #FFFFFF; text-decoration: none; }

a:hover { color: #CCC; }

#canvas {
border: 1px solid black;
position: absolute;
z-index: 10000;
}


#flake {
color: #fff;
position: absolute;
font-size: 25px;
top: -50px;
}

#page {
position: relative;
}
 

Вариант B. Также можно создать отдельный файл, например snow.css и вставить этот же код туда, правда его надо будет подключить в head следующим образом:

<link rel="stylesheet" href="snow.css" type="text/css" media="screen">

5. Подключаем скрипт падающего снега

Вариант А. Для этого нам нужно вставить в самый низ сайта (до закрытия </body>) следующий javascript-код:

<script>
var t = setInterval(
function(){
var documentHeight  = $(document).height();
var startPositionLeft  = Math.random() * $(document).width() - 100;
var startOpacity = 0.5 + Math.random();
var sizeFlake = 10 + Math.random() * 20;
var endPositionTop = documentHeight - 40;
var endPositionLeft = startPositionLeft - 100 + Math.random() * 200;
var durationFall = documentHeight * 10 + Math.random() * 5000;
$('#flake')
.clone()
.appendTo('body')
.css(
{
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake
}

)
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function() {
$(this).remove()
}
);
}, 500);



var snow = {};
var snowflex = {};
snowflex.create  = function(){
var flex = document.createElement('div');
flex.innerHTML   = "&#10052;";
flex.style.fontSize  = 10 + Math.random() * 20 + 'px';
flex.style.top  = - 50 + Math.random() * 20 + 'px';
flex.style.left  = Math.random() * 1500 + 'px';
flex.style.position  = "absolute";
flex.style.color  = "#F3F3F3";
flex.style.opacity = Math.random();
document.getElementsByTagName('body')[0].appendChild(flex);
return flex;
};


snow.snowflex = function(){
var flex = snowflex.create();
var x = -1 + Math.random() * 2;
var t = setInterval( 
function(){
flex.style.top  = parseInt(flex.style.top) +  5 + 'px';
flex.style.left = parseInt(flex.style.left) +  x + 'px';
if (parseInt(flex.style.top) > 1500) {
clearInterval(t);
document.getElementsByTagName('body')[0].removeChild(flex);
} 
}, 45 + Math.random() * 20);
};

snow.storm = function(){
var t = setInterval(
function(){
snow.snowflex();
}, 500);
};

//snow.storm();

var fog = {};
fog.draw = function(ctx, x, y){
ctx.fillStyle = "rgba( 255, 255, 255, " + Math.random() + " )";
ctx.arc( x, y, 10,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
};

fog.start = function(){
var ctx = document.getElementById('canvas').getContext("2d");
var x = 0;
var y = 0;
var t = setInterval( 
function(){
x = 300 + 300*Math.sin(x);
y = 300 + 300* -Math.cos(x);
x += 2;
fog.draw(ctx, x, y);
}, 100);
};

//fog.start();
</script>

Вариант B. Также как и с css-кодом, javascript можно вынести в отдельный файл и также его назвать snow.js и подключить его в head:

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

6. Заливаем изображение фона

Залить картинку bg.jpg из архива в корень Вашего сайта

7. Вставляем html код

Ну и осталось самое главное - вставить html код падающего снега:

<img src="bg.jpg" class="bg">

<div id="page">
<h1>С Новым годом!</h1>
</div>

<div id = "flake">&#10052;</div>

Скрипт падающего снега успешно подключен. Обязательно посмотрите его в работе. Всего доброго!

Похожие статьи