鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

;(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;

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg