Главная » Файлы » Прочие скрипты » HTML5

Очередной новогодний снежок на HTML5 canvas и jQuery с возможностью подталкивания снежинок
07.11.14, 13:18:04



Классное решение. С демо-сайта сможете сами взять тот тип снега, который нужен именно вам. В моём примере мы будем использовать снежок самый первый вид снега

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
.snow {  
position:fixed;  
top:0px;  
left:0px;  
z-index:0;  
  }


Следующий код после < /head >:
Код
<canvas width="100" height="100" class="snow"></canvas>  
  <script>  
  /* ===========================================================  
* jquery-let_it_snow.js v1  
* ===========================================================  
* NOTE: This plugin is based on the work by Jason Brown (Loktar00)  
* https://github.com/loktar00/JQuery-Snowfall  
* http://www.thepetedesign.com  
*  
* As the end of the year approaches, let's add
* some festive to your website!  
*  
* https://github.com/peachananr/let_it_snow  
*  
* ========================================================== */  

  console.log($(window).height())  

  !function($){  

var defaults = {  
speed: 0,  
interaction: true,  
size: 2,  
count: 200,  
opacity: 0,  
color: "#ffffff",  
windPower: 0,  
image: false  
};  

$.fn.let_it_snow = function(options){  
var settings = $.extend({}, defaults, options),  
el = $(this),  
flakes = [],  
canvas = el.get(0),  
ctx = canvas.getContext("2d"),  
flakeCount = settings.count,  
mX = -100,  
mY = -100;  

canvas.width = $(document).width();  
canvas.height = $(document).height();  

(function() {  
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||  
function(callback) {  
window.setTimeout(callback, 1000 / 60);  
};  
window.requestAnimationFrame = requestAnimationFrame;  
})();  

function snow() {  
ctx.clearRect(0, 0, canvas.width, canvas.height);  

for (var i = 0; i < flakeCount; i++) {  
var flake = flakes[i],  
x = mX,  
y = mY,  
minDist = 100,  
x2 = flake.x,  
y2 = flake.y;  

var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),  
dx = x2 - x,  
dy = y2 - y;  

if (dist < minDist) {  
var force = minDist / (dist * dist),  
xcomp = (x - x2) / dist,  
ycomp = (y - y2) / dist,  
deltaV = force / 2;  

flake.velX -= deltaV * xcomp;  
flake.velY -= deltaV * ycomp;  

} else {  
flake.velX *= .98;  
if (flake.velY <= flake.speed) {  
flake.velY = flake.speed  
}  

switch (settings.windPower) {
case false:  
flake.velX += Math.cos(flake.step += .05) * flake.stepSize;  
break;  

case 0:  
flake.velX += Math.cos(flake.step += .05) * flake.stepSize;  
break;  

default:
flake.velX += 0.01 + (settings.windPower/100);  
}  
}  

var s = settings.color;  
var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;  
var matches = patt.exec(s);  
var rgb = parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16);  

flake.y += flake.velY;  
flake.x += flake.velX;  

if (flake.y >= canvas.height || flake.y <= 0) {  
reset(flake);  
}  

if (flake.x >= canvas.width || flake.x <= 0) {  
reset(flake);  
}  
if (settings.image == false) {  
ctx.fillStyle = "rgba(" + rgb + "," + flake.opacity + ")"  
ctx.beginPath();  
ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);  
ctx.fill();  
} else {  

ctx.drawImage($("img#lis_flake").get(0), flake.x, flake.y, flake.size * 2, flake.size * 2);  
}  

}  
requestAnimationFrame(snow);  
};  

function reset(flake) {  

if (settings.windPower == false || settings.windPower == 0) {  
flake.x = Math.floor(Math.random() * canvas.width);  
flake.y = 0;  
} else {  
if (settings.windPower > 0) {  
var xarray = Array(Math.floor(Math.random() * canvas.width), 0);  
var yarray = Array(0, Math.floor(Math.random() * canvas.height))  
var allarray = Array(xarray, yarray)  

var selected_array = allarray[Math.floor(Math.random()*allarray.length)];  

flake.x = selected_array[0];  
flake.y = selected_array[1];  
} else {  
var xarray = Array(Math.floor(Math.random() * canvas.width),0);  
var yarray = Array(canvas.width, Math.floor(Math.random() * canvas.height))  
var allarray = Array(xarray, yarray)  

var selected_array = allarray[Math.floor(Math.random()*allarray.length)];  

flake.x = selected_array[0];  
flake.y = selected_array[1];  
}  
}  

flake.size = (Math.random() * 3) + settings.size;  
flake.speed = (Math.random() * 1) + settings.speed;  
flake.velY = flake.speed;  
flake.velX = 0;  
flake.opacity = (Math.random() * 0.5) + settings.opacity;  
}  
function init() {  
for (var i = 0; i < flakeCount; i++) {  
var x = Math.floor(Math.random() * canvas.width),  
y = Math.floor(Math.random() * canvas.height),  
size = (Math.random() * 3) + settings.size,  
speed = (Math.random() * 1) + settings.speed,  
opacity = (Math.random() * 0.5) + settings.opacity;  

flakes.push({  
speed: speed,  
velY: speed,  
velX: 0,  
x: x,  
y: y,  
size: size,  
stepSize: (Math.random()) / 30,  
step: 0,  
angle: 180,  
opacity: opacity  
});  
}  

snow();  
}  

if (settings.image != false) {  
$("<img src='"+settings.image+"' style='display: none' id='lis_flake'>").prependTo("body")  
}  

init();  

$(window).resize(function() {  
if(this.resizeTO) clearTimeout(this.resizeTO);  
this.resizeTO = setTimeout(function() {  
el2 = el.clone();  
el2.insertAfter(el);  
el.remove();  

el2.let_it_snow(settings);  
}, 200);  
});  

if (settings.interaction == true) {  
canvas.addEventListener("mousemove", function(e) {  
mX = e.clientX,  
mY = e.clientY  
});  
}  
}  
  }(window.jQuery);  

  $(document).ready(function () {  
$("canvas.snow").let_it_snow();  
  });  
  </script>


С настройками, думаю, разберётесь сами. Они в самом начале скриптовой части, но, если всё же останутся вопросы - задавайте их в комментариях

Материал подготовлен Apocalypse
Категория: HTML5 | Добавил: Apocalypse | Теги: возможностью, Снежок, очередной, Canvas, на, JQuery, HTML5, новогодний, подталкивания, снежинок
Просмотров: 511 | Загрузок: 0 | Рейтинг: 1.0/2
Всего комментариев: 0
Имя *:
Email: