Падающий снег на 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 = "❄";
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">❄</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 = "❄";
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">❄</div>
Скрипт падающего снега успешно подключен. Обязательно посмотрите его в работе. Всего доброго!
Комментарии ()