Просто найденное решение, script с эффектами светящихся огоньков.
Код на сайте, где необходимо
<canvas id="pixie"></canvas>
CSS
#pixie {
position: fixed;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: -1;
}
Скрипт фона
var WIDTH;
var HEIGHT;
var canvas;
var con;
var g;
var pxs = new Array();
var rint = 60;
var x_sm=0;
var y_sm=0;
var mouseX=0;
var mouseY=0;
var stars=300;
$(document).ready(function(){
WIDTH = parseInt($('body').css('width'));
HEIGHT = parseInt($('body').css('height'));
var coeff = HEIGHT/1000;
$('#container').width(WIDTH).height(HEIGHT);
canvas = document.getElementById('pixie');
$(canvas).attr('width', WIDTH).attr('height',HEIGHT);
con = canvas.getContext('2d');
var allstars = stars*coeff;
for(var i = 0; i < allstars; i++) {
pxs[i] = new Circle();
pxs[i].reset();
}
setInterval(draw,rint);
});
function draw() {
con.clearRect(0,0,WIDTH,HEIGHT);
for(var i = 0; i < pxs.length; i++) {
pxs[i].fade();
pxs[i].move();
pxs[i].draw();
}
}
$(document).mousemove(function (e){
mouseX = e.pageX;
mouseY = e.pageY;
});
function Circle(e) {
this.s = {ttl:8000, alph:1, xmax:5, ymax:2, rmax:2, rt:1, xdef:960, ydef:540, xdrift:4, ydrift: 4, random:true, blink:true};
this.reset = function() {
this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef);
this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef);
this.r = ((this.s.rmax-1)*Math.random()) + 1;
this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1);
this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1);
this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax);
this.rt = Math.random()*this.hl;
this.s.rt = Math.random();
this.stop = Math.random()*.2+.4;
this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
}
this.fade = function() {
this.rt += this.s.rt;
}
this.draw = function() {
//alert(e.pageX);
/* var mouseX = $(document).mousemove(function(e) {
var X = e.pageX;
// var Y = e.pageY;
//alert(X);
return X;
});*/
/* $(document).mousemove(function (e){
var mouseX = e.pageX;
//alert(mouseX);
return(mouseX);
}); */
//x_sm = x_sm+(mouseX-x_sm)/3;
//alert(mouseX+" "+x_sm);
x_sm = x_sm+(mouseX-x_sm)/3000;
y_sm = y_sm+(mouseY-y_sm)/3000;
if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) this.s.rt = this.s.rt*-1;
else if(this.rt >= this.hl) this.reset();
var newo = 1-(this.rt/this.hl);
con.beginPath();
con.arc(this.x+x_sm/WIDTH*this.r*25, this.y+y_sm/HEIGHT*this.r*25,this.r,0,Math.PI*2,true);
//con.arc(this.x+x_sm,this.y,this.r,0,Math.PI*2,true);
con.closePath();
// context.closePath();
con.fill();
//var color_cr = Math.ceil((newo+0.1)*255);
var color_cr = 175;
con.fillStyle = "rgb("+color_cr+", "+color_cr+", "+color_cr+")";
//плавно уменьшаем прозрачность
var cr = this.r*newo;
//c_alpha[e] = c_alpha[e]+(1-c_alpha[e])/speed[e]/2.5;
if(newo>1){newo=1}
if(newo<0){newo=0}
con.globalAlpha = newo;
this.r = 0.1+newo*this.s.rmax;
//g = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr));
//g.addColorStop(0.0, 'rgba(255,255,255,'+newo+')');
//g.addColorStop(this.stop, 'rgba(255,255,255,'+(newo*.6)+')');
//g.addColorStop(1.0, 'rgba(255,255,255,0)');
//con.fillStyle = g;
//con.fill();
}
this.move = function() {
this.x += (this.rt/this.hl)*this.dx;
this.y += (this.rt/this.hl)*this.dy;
if(this.x > WIDTH || this.x < 0) this.dx *= -1;
if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
}
this.getX = function() { return this.x; }
this.getY = function() { return this.y; }
}
[site-socialshare]