特效网页:
http://www.jq22.com/code846
--------------------------------------------------------------------------------------------------------------------------------------
html:
<canvas id="c"></canvas>
------------------------------------------------------------------------------------------------------------------------------------------
css:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
position: relative;
100%;
}
body {
background: #eee;
}
canvas {
background: white;
display: block;
}
#c {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
-------------------------------------------------------------------------------------------------------
js:
;(function(main) {
var args = {};
main(args);
})(function(args) {
'use strict';
var c = document.getElementById('c');
var ctx = c.getContext('2d');
c.width = window.innerWidth;
c.height = window.innerHeight;
var mouse = {
isMoveForFirst: false,
x: 0,
y: 0,
ox: 0,
oy: 0,
tx: c.width / 2,
ty: c.height / 2
};
var Box = function(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.a = Math.random() * Math.PI * 2;
this.s = 1;
this.v = 0;
this.o = 1;
};
Box.prototype = {
constructor: Box,
update: function() {
this.o -= 0.01;
this.v += 0.1;
this.a += Math.random() * 0.8 - 0.4;
this.x += Math.cos(this.a) * this.v;
this.y += Math.sin(this.a) * this.v;
this.v = Math.min(10, this.v);
this.o = Math.max(0, this.o);
},
reset: function() {
this.a = Math.random() * Math.PI * 2;
this.v = 0;
this.o = 1;
},
render: function(ctx) {
ctx.save();
ctx.globalAlpha = this.o;
ctx.fillStyle = 'white';
ctx.translate(this.x, this.y);
ctx.rotate(this.a);
ctx.scale(this.s, this.s);
ctx.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
ctx.restore();
}
};
var box = null;
var boxList = [];
var maxBox = 200;
var index = -1;
c.addEventListener('mousemove', function(e) {
var rect = c.getBoundingClientRect();
mouse.isMoveForFirst = true;
mouse.x = e.clientX - rect.left;
mouse.y = e.clientY - rect.top;
});
requestAnimationFrame(function loop() {
requestAnimationFrame(loop);
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, c.width, c.height);
if(!mouse.isMoveForFirst) {
var dx = mouse.tx - mouse.x;
var dy = mouse.ty - mouse.y;
var d = Math.sqrt(dx * dx + dy * dy);
mouse.x += dx * 0.1;
mouse.y += dy * 0.1;
if(d < 0.98) {
mouse.x = mouse.tx;
mouse.y = mouse.ty;
}
}
if(mouse.x !== mouse.ox && mouse.y !== mouse.oy) {
if(boxList.length < maxBox) {
box = new Box(mouse.x, mouse.y, 10, 3);
boxList.push(box);
} else {
index = (index + 1) % boxList.length;
box = boxList[index];
box.reset();
box.x = mouse.x;
box.y = mouse.y;
}
}
for(var i = 0; i < boxList.length; i++) {
box = boxList[i];
box.update();
box.render(ctx);
}
mouse.ox = mouse.x;
mouse.oy = mouse.y;
});
});