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

Частицы, летающие за курсором от @hakimel на HTML5 canvas для uCoz
11.10.14, 06:56:06



Очередной интереснейший пример возможностей HTML5. В этот раз за курсором летают частицы

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

Установка:

В то место, где хотите видеть такой блок, вставляйте:
Код
<canvas id="c" width="100%" height="100%"></canvas>  
  <script>  
document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218  
// start of submission //  
md = 0;  
m = Math;  
mr = m.round;  
g = m.random;  
d = document;  
dl = "addEventListener";  
w = window;  

c = d.getElementById("c");  
t = c.getContext("2d");  
r();  
x = c.width * 0.5;  
y = c.height * 0.5;  
d[dl]("mousemove", function (a) {  
x = a.clientX;  
y = a.clientY  
}, 0);  
d[dl]("mousedown", function () {  
md = 1  
}, 0);  
d[dl]("mouseup", function () {  
md = 0  
}, 0);  
w.addEventListener("resize", r, 0);  
l = [];  
i = 0;  
while (++i < 25) {  
p = {  
x: x,  
y: y,  
d: x,  
k: y,  
s: 2 + g(),  
a: 0,  
b: 0.01 + g() * 0.04,  
f: "#" + (g() * 4210752 + 11184810 | 0).toString(16),  
o: 55 + (55 * g())  
};  
l.push(p)  
}  
setInterval(function () {  
t.fillStyle = "rgba(255,255,255,0.3)";  
t.fillRect(0, 0, c.width, c.height);  
i = 0;  
while (p = l[++i]) {  
lp = {  
x: p.x,  
y: p.y  
};  
p.a += p.b;  
p.d += (x - p.d) * p.b;  
p.k += (y - p.k) * p.b;  
p.x = p.d + m.cos(i + p.a) * p.o;  
p.y = p.k + m.sin(i + p.a) * p.o;  
p.x = m.max(m.min(p.x, c.width), 0);  
p.y = m.max(m.min(p.y, c.height), 0);  
with(t) {  
beginPath();  
fillStyle = p.f;  
strokeStyle = p.f;  
lineWidth = p.s;  
moveTo(lp.x, lp.y);  
lineTo(p.x, p.y);  
stroke();  
arc(p.x, p.y, p.s / 2, 0, m.PI * 2, 1 > 0);  
fill()  
}  
}  
}, 17);  

function r() {  
c.width = w.innerWidth - 25;  
c.height = w.innerHeight - 25  
};  
// end of submission //  
  </script>


Материал подготовлен Apocalypse
Категория: HTML5 | Добавил: Apocalypse | Теги: частицы, @hakimel, курсором, Летающие, ucoz, на, HTML5, От, для, За
Просмотров: 957 | Загрузок: 0 | Комментарии: 5 | Рейтинг: 1.0/2
Всего комментариев: 5
0
Залип в демо (

0
Я бы сделал ТАК для большего удобства.

0
Почему у меня это не работает на сайте ?

0
Без понятия

Имя *:
Email: