Просто найденное решение, 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; }
}

Поделиться в соц. сетях: