Падающий снег для сайта скрипт jQuery

Снег для сайта скрипт jQuery

Скрипт падающего снега для установки на сайт, со снежинками и другими символами, можно сделать более 100000 фигур вместо снега и применить любой цвет, написано как устанавливать с демо примером.

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

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

Добавьте перед закрывающим тегом <body> скрипт jQuery, на страницах с эффектом падающего снега.

<script>
var t = setInterval(
function(){
var documentHeight = $(document).height();
var startPositionLeft = Math.random() * $(document).width() - 81;
var startOpacity = 0.5 + Math.random();
var sizeFlake = 10 + Math.random() * 44;
var endPositionTop = documentHeight - 144;
var endPositionLeft = startPositionLeft - 100 + Math.random() * 144;
var durationFall = documentHeight * 10 + Math.random() * 4181;
$('#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 = "&#10036";
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 = "#000";
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);
};
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);
};
</script>

Настройка скрипта jQuery

var sizeflake = 10 + Math.random() * 44;
44 Максимальная величина шрифта снежинок
var endPositionTop = documentHeight - 144;
144 Высота от нижней части страницы в которой снег будет исчезать
var durationFall = documentHeight * 10 + Math.random() * 4181;
4181 Время в мс до начала изменения прозрачности снежинок
flex.innerHTML = "&#10036";
&#10036 Код типа снежинки или другого элемента из более чем 100000 экземпляров можно выбрать в генераторе символов HTML и CSS
flex.style.color = "#000";
#000 Цвет снежинки, можно выбрать из таблицы цветов

Подключение стилей CSS падающего снега

CSS стили снега можно установить как в демо примере, или перенести в основной файл стилей.

<style>
#flake {
position: absolute;
font-size: 25px;
top:-50px;
overflow:hidden
}
</style>

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

Элемент падающего снега, также устанавливается как в примере.

<div id="flake">&#10036</div>

Демо пример падающего снега

Элемент падающего снега, также устанавливается как в примере.


Рейтинг: 3.0/5 из 2



Добавлено Автор Ник Источник Просмотров Комментариев Теги
13-10-2015 Михаил Меренков aTmpl © 729 0 снег на сайт, снег на сайте, снег для сайта, снег, скрипт снега