六边形粒子动画

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

var w = c.width = window.innerWidth
	,	h = c.height = window.innerHeight
	, ctx = c.getContext( '2d' )
	,	particles = []
	,	dirs = [
		{ x: Math.cos( Math.PI * 2 / 6 ), y: Math.sin( Math.PI * 2 / 6 ) },
		{ x: Math.cos( Math.PI * 2 / 6 * 2 ), y: Math.sin( Math.PI * 2 / 6 * 2 ) },
		{ x: Math.cos( Math.PI * 2 / 6 * 3 ), y: Math.sin( Math.PI * 2 / 6 * 3 ) },
		{ x: Math.cos( Math.PI * 2 / 6 * 4 ), y: Math.sin( Math.PI * 2 / 6 * 4 ) },
		{ x: Math.cos( Math.PI * 2 / 6 * 5 ), y: Math.sin( Math.PI * 2 / 6 * 5 ) },
		{ x: Math.cos( Math.PI * 2 / 6 * 6 ), y: Math.sin( Math.PI * 2 / 6 * 6 ) },
	],
	len = 20;

var tick = 0;
function anim(){
	
	window.requestAnimationFrame( anim );
	
	tick += .1;
	
	ctx.shadowBlur = 0;
	ctx.globalCompositeOperation = 'source-over';
	ctx.fillStyle = 'rgba(0,0,0,.04)';
	ctx.fillRect( 0, 0, w, h );
	
	ctx.shadowBlur = 3;
	ctx.globalCompositeOperation = 'lighter';
	
	if( particles.length < 100 && Math.random() < .5 )
		particles.push({
			tick: tick,
			sx: w/2,
			sy: h/2,
			x: 0,
			y: 0,
			dir: ( Math.random() * 3 |0 ) * 2,
			askDir: false,
			time: 0
		});
	
	particles.map(function( particle ){
		if( particle.askDir ){
			particle.dir = Math.random() < .5 ?
				( particle.dir + 1 ) % 6 :
				( particle.dir + 5 ) % 6;
			particle.askDir = false;
		}
		
		++particle.time;
		
		var dir = dirs[particle.dir];
		particle.x += dir.x * 1.5;
		particle.y += dir.y * 1.5;
		
		if( particle.x*particle.x + particle.y*particle.y >= len*len ){
			particle.sx += dir.x * len;
			particle.sy += dir.y * len;
			
			particle.x = particle.y = 0;
			particle.askDir = true;
			
			if( Math.random() < .05 ){
				particle.sx = w/2;
				particle.sy = h/2;
				particle.dir = ( Math.random() * 3 |0 ) * 2;
				particle.askDir = false;
				particle.tick = tick;
			}
		}
		
		var color = 'hsla(hue,80%,50%,.8)'.replace( 'hue', particle.tick );
		ctx.shadowColor = ctx.fillStyle = color;
		var x = particle.sx + particle.x
			,	y = particle.sy + particle.y
		ctx.fillRect( x, y, 2.5, 2.5 );
		
		for( var i = .5; i < Math.random(); i += .1 ){
			ctx.fillRect( x + ( Math.random() -.5 ) * 20, y + ( Math.random() - .5 ) * 20, 1.5, 1.5 );
		}
	})
}

ctx.fillStyle = '#111';
ctx.fillRect( 0, 0, w, h );
anim();

window.addEventListener( 'resize', function(){
	w = c.width = window.innerWidth;
	h = c.height = window.innerHeight;
	particles.length = 0;
	ctx.fillStyle = '#111';
	ctx.fillRect( 0, 0, w, h );
})

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>六边形粒子动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号