], {duration: 7000, fade: 500});

});

$(document).ready( function(){

// CANVAS

function callCanvas (canvas) {

// SETTINGS

var screenpointSplitt = 10000

var movingSpeed = 0.1

var viewportWidth = $(window).width();

var viewportHeight = $(window).height();

// Calculate Screen Dots

var nbCalculated = Math.round(viewportHeight*viewportWidth/screenpointSplitt)

//CONFIG

var _this = this,

ctx = canvas.getContext('2d');

_this.config = {

star: {

color: 'rgba(255, 255, 255, 1)'

},

line: {

color: 'rgba(255, 255, 255, 1)',

width: 0.1

},

position: {

x: canvas.width * 0.5,

y: canvas.height * 0.5

},

velocity: movingSpeed,

length: nbCalculated,

distance: 120,

radius: 120,

stars: []

};

function Star () {

this.x = Math.random() * canvas.width;

this.y = Math.random() * canvas.height;

this.vx = (_this.config.velocity - (Math.random() * 0.3));

this.vy = (_this.config.velocity - (Math.random() * 0.3));

this.radius = Math.random();

}

Star.prototype = {

create: function(){

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

ctx.fill();

},

animate: function(){

var i;

for(i = 0; i < _this.config.length; i++){

var star = _this.config.stars[i];

if(star.y < 0 || star.y > canvas.height){

star.vx = star.vx;

star.vy = - star.vy;

}

else if(star.x < 0 || star.x > canvas.width){

star.vx = - star.vx;

star.vy = star.vy;

}

star.x += star.vx;

star.y += star.vy;

}

},

line: function(){

var length = _this.config.length,

iStar,

jStar,

i,

j;

for(i = 0; i < length; i++){

for(j = 0; j < length; j++){

iStar = _this.config.stars[i];

jStar = _this.config.stars[j];

if(

(iStar.x - jStar.x) < _this.config.distance &&

(iStar.y - jStar.y) < _this.config.distance &&

(iStar.x - jStar.x) > - _this.config.distance &&

(iStar.y - jStar.y) > - _this.config.distance

) {

if(

(iStar.x - _this.config.position.x) < _this.config.radius &&

(iStar.y - _this.config.position.y) < _this.config.radius &&

(iStar.x - _this.config.position.x) > - _this.config.radius &&

(iStar.y - _this.config.position.y) > - _this.config.radius

) {

ctx.beginPath();

ctx.moveTo(iStar.x, iStar.y);

ctx.lineTo(jStar.x, jStar.y);

ctx.stroke();

ctx.closePath();

}

}

}

}

}

};

_this.createStars = function () {

var length = _this.config.length,

star,

i;

ctx.clearRect(0, 0, canvas.width, canvas.height);

for(i = 0; i < length; i++){

_this.config.stars.push(new Star());

star = _this.config.stars[i];

star.create();

}

star.line();

star.animate();

};

_this.setCanvas = function () {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

};

_this.setContext = function () {

ctx.fillStyle = _this.config.star.color;

ctx.strokeStyle = _this.config.line.color;

ctx.lineWidth = _this.config.line.width;

};

_this.loop = function (callback) {

callback();

reqAnimFrame(function () {

_this.loop(function () {

callback();

});

});

};

_this.bind = function () {

$(window).on('mousemove', function(e){

_this.config.position.x = e.pageX;

_this.config.position.y = e.pageY;

});

};

_this.init = function () {

_this.setCanvas();

_this.setContext();

_this.loop(function () {

_this.createStars();

});

_this.bind();

};

return _this;

}

//requestAnimationFrame

var reqAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {

window.setTimeout(callback, 1000 / 60);

};

callCanvas($('canvas')[0]).init();

//Resize Canvas

var waitForFinalEvent = (function () {

var timers = {};

return function (callback, ms, uniqueId) {

if (!uniqueId) {

uniqueId =

Новини

ths