粒子文字

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var canvas = document.querySelector("#scene"),
	ctx = canvas.getContext("2d"),
	particles = [],
	amount = 0,
	mouse = {
		x: 0,
		y: 0
	},
	radius = 0.7; //Init radius of the force field

var colors = ["rgba(26, 188, 156, .6)", "rgba(46, 204, 113, .4)", "rgba(52, 152, 219, .4)", "rgba(52, 152, 219, .4)", "rgba(241, 196, 15, .6)", "rgba(231, 76, 60, .4)"];

var colorsTwo = ["rgba(26, 188, 156, 1)", "rgba(46, 204, 113, 1)", "rgba(52, 152, 219, 1)", "rgba(52, 152, 219, 1)", "rgba(241, 196, 15, 1)", "rgba(231, 76, 60, 1)"];

var copy = "jq22.com"; // Text to display

var initSize = Math.floor(Math.random() * .6) + 1  ;
var hoverSize = initSize + .7;

var ww = canvas.width = window.innerWidth;
var wh = canvas.height = window.innerHeight;

function Particle(x, y) {
	this.x = Math.random() * ww;
	this.y = Math.random() * wh;
	this.dest = {
		x: x,
		y: y
	};
	//this.r = Math.random() * 1; // the size of bubbles
	this.vx = (Math.random() - 0.5) * 2;
	this.vy = (Math.random() - 0.5) * 2;
	this.accX = 0;
	this.accY = 0;
	this.friction = Math.random() * 0.015 + 0.94; // force of bounce, just try to change 0.015 to 0.5

//this.color = colors[Math.floor(Math.random() * 10)];	
	//this.colorTwo = colorsTwo[Math.floor(Math.random() * 10)];

}

Particle.prototype.render = function() {

this.accX = (this.dest.x - this.x) / 200; //acceleration for X
	this.accY = (this.dest.y - this.y) / 200; //acceleration for Y
	this.vx += this.accX;
	this.vy += this.accY;
	this.vx *= this.friction;
	this.vy *= this.friction;

this.x += this.vx;
	this.y += this.vy;

ctx.fillStyle = this.color;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
	ctx.fill();

var a = this.x - mouse.x;
	var b = this.y - mouse.y;

}

function onMouseMove(e) {
	mouse.x = e.clientX;
	mouse.y = e.clientY;
}

function initScene() {
	ww = canvas.width = window.innerWidth;
	wh = canvas.height = window.innerHeight;

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

ctx.font = "bold " + (ww / 10) + "px sans-serif"; // Size of the text
	ctx.textAlign = "center";
	ctx.fillText(copy, ww / 2, wh / 2); //Centering

var data = ctx.getImageData(0, 0, ww, wh).data;
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.globalCompositeOperation = "screen";

particles = [];
	for (var i = 0; i < ww; i += Math.round(ww / 400)) { //400 here represents the amount of particles
		for (var j = 0; j < wh; j += Math.round(ww / 400)) {
			if (data[((i + j * ww) * 4) + 3] > 250) {
				particles.push(new Particle(i, j));
			}
		}
	}
	amount = particles.length;

}

function onMouseClick() {
	radius = 4; //onclick expand radius
	
}

function offMouseClick() {
	radius = 0.5; //offClick init radius
}

function delayedInitRadius() {
    setTimeout(offMouseClick, 500); //delay for offClick init radius
}

function render(a) {
	requestAnimationFrame(render);
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	for (var i = 0; i < amount; i++) {
		particles[i].render();
	}
};

window.addEventListener("resize", initScene);
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mousedown", onMouseClick);
window.addEventListener("mouseup", delayedInitRadius);
initScene();
requestAnimationFrame(render);

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