粒子网格特效

喜欢ヅ旅行 2023-02-28 05:39 90阅读 0赞

![在这里插入图片描述][20200720154534449.gif]

css

@charset "utf-8";
    .particle-network-animation { 
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;
      background-color: #171717;
    }
    .particle-network-animation::before { 
      z-index: -2;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-size: cover;
      opacity: 0.2;
    }
    
    .glow { 
      z-index: -1;
      position: fixed;
      top: 50%;
      left: 50%;
      background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
    }
    
    .glow-1 { 
      width: 150vw;
      height: 150vh;
      margin-top: -75vh;
      margin-left: -75vw;
      animation: glow-1-move 25s linear infinite both;
    }
    
    @keyframes glow-1-move { 
      from { 
        transform: translate(-100%, 100%);
      }
      to { 
        transform: translate(100%, -100%);
      }
    }
    .glow-2 { 
      width: 100vw;
      height: 100vh;
      margin-top: -50vh;
      margin-left: -50vw;
      animation: glow-2-move 25s linear 8.3333333333s infinite both;
    }
    
    @keyframes glow-2-move { 
      from { 
        transform: translate(-100%, 0%);
      }
      to { 
        transform: translate(100%, 100%);
      }
    }
    .glow-3 { 
      width: 120vw;
      height: 120vh;
      margin-top: -60vh;
      margin-left: -60vw;
      animation: glow-3-move 25s linear 16.6666666667s infinite both;
    }
    
    @keyframes glow-3-move { 
      from { 
        transform: translate(100%, 100%);
      }
      to { 
        transform: translate(0%, -100%);
      }
    }

js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

(function() { 
    
    	var ParticleNetworkAnimation, PNA;
    	ParticleNetworkAnimation = PNA = function() { };
    
    	PNA.prototype.init = function(element) { 
    		this.$el = $(element);
    
    		this.container = element;
    		this.canvas = document.createElement('canvas');
    		this.sizeCanvas();
    		this.container.appendChild(this.canvas);
    		this.ctx = this.canvas.getContext('2d');
    		this.particleNetwork = new ParticleNetwork(this);
    
    		this.bindUiActions();
    
    		return this;
    	};
    
    	PNA.prototype.bindUiActions = function() { 
    		$(window).on('resize', function() { 
    			// this.sizeContainer();
    			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    			this.sizeCanvas();
    			this.particleNetwork.createParticles();
    		}.bind(this));
    	};
    
    	PNA.prototype.sizeCanvas = function() { 
    		this.canvas.width = this.container.offsetWidth;
    		this.canvas.height = this.container.offsetHeight;
    	};
    
    	var Particle = function(parent, x, y) { 
    		this.network = parent;
    		this.canvas = parent.canvas;
    		this.ctx = parent.ctx;
    		this.particleColor = returnRandomArrayitem(this.network.options.particleColors);
    		this.radius = getLimitedRandom(1.5, 2.5);
    		this.opacity = 0;
    		this.x = x || Math.random() * this.canvas.width;
    		this.y = y || Math.random() * this.canvas.height;
    		this.velocity = { 
    			x: (Math.random() - 0.5) * parent.options.velocity,
    			y: (Math.random() - 0.5) * parent.options.velocity
    		};
    	};
    
    	Particle.prototype.update = function() { 
    		if (this.opacity < 1) { 
    			this.opacity += 0.01;
    		} else { 
    			this.opacity = 1;
    		}
    		// Change dir if outside map
    		if (this.x > this.canvas.width + 100 || this.x < -100) { 
    			this.velocity.x = -this.velocity.x;
    		}
    		if (this.y > this.canvas.height + 100 || this.y < -100) { 
    			this.velocity.y = -this.velocity.y;
    		}
    
    		// Update position
    		this.x += this.velocity.x;
    		this.y += this.velocity.y;
    	};
    
    	Particle.prototype.draw = function() { 
    		// Draw particle
    		this.ctx.beginPath();
    		this.ctx.fillStyle = this.particleColor;
    		this.ctx.globalAlpha = this.opacity;
    		this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    		this.ctx.fill();
    	};
    
    	var ParticleNetwork = function(parent) { 
    		this.options = { 
    			velocity: 1, // the higher the faster
    			density: 15000, // the lower the denser
    			netLineDistance: 200,
    			netLineColor: '#929292',
    			particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
    		};
    		this.canvas = parent.canvas;
    		this.ctx = parent.ctx;
    
    		this.init();
    	};
    
    	ParticleNetwork.prototype.init = function() { 
    		// Create particle objects
    		this.createParticles(true);
    
    		// Update canvas
    		this.animationFrame = requestAnimationFrame(this.update.bind(this));
    
    		this.bindUiActions();
    	};
    
    	ParticleNetwork.prototype.createParticles = function(isInitial) { 
    		// Initialise / reset particles
    		var me = this;
    		this.particles = [];
    		var quantity = this.canvas.width * this.canvas.height / this.options.density;
    
    		if (isInitial) { 
    			var counter = 0;
    			clearInterval(this.createIntervalId);
    			this.createIntervalId = setInterval(function() { 
    				if (counter < quantity - 1) { 
    					// Create particle object
    					this.particles.push(new Particle(this));
    				}
    				else { 
    					clearInterval(me.createIntervalId);
    				}
    				counter++;
    			}.bind(this), 250);
    		}
    		else { 
    			// Create particle objects
    			for (var i = 0; i < quantity; i++) { 
    				this.particles.push(new Particle(this));
    			}
    		}
    	};
    
    	ParticleNetwork.prototype.createInteractionParticle = function() { 
    		// Add interaction particle
    		this.interactionParticle = new Particle(this);
    		this.interactionParticle.velocity = { 
    			x: 0,
    			y: 0
    		};
    		this.particles.push(this.interactionParticle);
    		return this.interactionParticle;
    	};
    
    	ParticleNetwork.prototype.removeInteractionParticle = function() { 
    		// Find it
    		var index = this.particles.indexOf(this.interactionParticle);
    		if (index > -1) { 
    			// Remove it
    			this.interactionParticle = undefined;
    			this.particles.splice(index, 1);
    		}
    	};
    
    	ParticleNetwork.prototype.update = function() { 
    		if (this.canvas) { 
    
    			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    			this.ctx.globalAlpha = 1;
    
    			// Draw connections
    			for (var i = 0; i < this.particles.length; i++) { 
    				for (var j = this.particles.length - 1; j > i; j--) { 
    					var distance, p1 = this.particles[i], p2 = this.particles[j];
    
    					// check very simply if the two points are even a candidate for further measurements
    					distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y));
    					if (distance > this.options.netLineDistance) { 
    						continue;
    					}
    
    					// the two points seem close enough, now let's measure precisely
    					distance = Math.sqrt(
    						Math.pow(p1.x - p2.x, 2) +
    						Math.pow(p1.y - p2.y, 2)
    					);
    					if (distance > this.options.netLineDistance) { 
    						continue;
    					}
    
    					this.ctx.beginPath();
    					this.ctx.strokeStyle = this.options.netLineColor;
    					this.ctx.globalAlpha = (this.options.netLineDistance - distance) / this.options.netLineDistance * p1.opacity * p2.opacity;
    					this.ctx.lineWidth = 0.7;
    					this.ctx.moveTo(p1.x, p1.y);
    					this.ctx.lineTo(p2.x, p2.y);
    					this.ctx.stroke();
    				}
    			}
    
    			// Draw particles
    			for (var i = 0; i < this.particles.length; i++) { 
    				this.particles[i].update();
    				this.particles[i].draw();
    			}
    
    			if (this.options.velocity !== 0) { 
    				this.animationFrame = requestAnimationFrame(this.update.bind(this));
    			}
    
    		}
    		else { 
    			cancelAnimationFrame(this.animationFrame);
    		}
    	};
    
    	ParticleNetwork.prototype.bindUiActions = function() { 
    		// Mouse / touch event handling
    		this.spawnQuantity = 3;
    		this.mouseIsDown = false;
    		this.touchIsMoving = false;
    
    		this.onMouseMove = function(e) { 
    			if (!this.interactionParticle) { 
    				this.createInteractionParticle();
    			}
    			this.interactionParticle.x = e.offsetX;
    			this.interactionParticle.y = e.offsetY;
    		}.bind(this);
    
    		this.onTouchMove = function(e) { 
    			e.preventDefault();
    			this.touchIsMoving = true;
    			if (!this.interactionParticle) { 
    				this.createInteractionParticle();
    			}
    			this.interactionParticle.x = e.changedTouches[0].clientX;
    			this.interactionParticle.y = e.changedTouches[0].clientY;
    		}.bind(this);
    
    		this.onMouseDown = function(e) { 
    			this.mouseIsDown = true;
    			var counter = 0;
    			var quantity = this.spawnQuantity;
    			var intervalId = setInterval(function() { 
    				if (this.mouseIsDown) { 
    					if (counter === 1) { 
    						quantity = 1;
    					}
    					for (var i = 0; i < quantity; i++) { 
    						if (this.interactionParticle) { 
    							this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
    						}
    					}
    				}
    				else { 
    					clearInterval(intervalId);
    				}
    				counter++;
    			}.bind(this), 50);
    		}.bind(this);
    
    		this.onTouchStart = function(e) { 
    			e.preventDefault();
    			setTimeout(function() { 
    				if (!this.touchIsMoving) { 
    					for (var i = 0; i < this.spawnQuantity; i++) { 
    						this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
    					}
    				}
    			}.bind(this), 200);
    		}.bind(this);
    
    		this.onMouseUp = function(e) { 
    			this.mouseIsDown = false;
    		}.bind(this);
    
    		this.onMouseOut = function(e) { 
    			this.removeInteractionParticle();
    		}.bind(this);
    
    		this.onTouchEnd = function(e) { 
    			e.preventDefault();
    			this.touchIsMoving = false;
    			this.removeInteractionParticle();
    		}.bind(this);
    
    		this.canvas.addEventListener('mousemove', this.onMouseMove);
    		this.canvas.addEventListener('touchmove', this.onTouchMove);
    		this.canvas.addEventListener('mousedown', this.onMouseDown);
    		this.canvas.addEventListener('touchstart', this.onTouchStart);
    		this.canvas.addEventListener('mouseup', this.onMouseUp);
    		this.canvas.addEventListener('mouseout', this.onMouseOut);
    		this.canvas.addEventListener('touchend', this.onTouchEnd);
    	};
    
    	ParticleNetwork.prototype.unbindUiActions = function() { 
    		if (this.canvas) { 
    			this.canvas.removeEventListener('mousemove', this.onMouseMove);
    			this.canvas.removeEventListener('touchmove', this.onTouchMove);
    			this.canvas.removeEventListener('mousedown', this.onMouseDown);
    			this.canvas.removeEventListener('touchstart', this.onTouchStart);
    			this.canvas.removeEventListener('mouseup', this.onMouseUp);
    			this.canvas.removeEventListener('mouseout', this.onMouseOut);
    			this.canvas.removeEventListener('touchend', this.onTouchEnd);
    		}
    	};
    
    	var getLimitedRandom = function(min, max, roundToInteger) { 
    		var number = Math.random() * (max - min) + min;
    		if (roundToInteger) { 
    			number = Math.round(number);
    		}
    		return number;
    	};
    
    	var returnRandomArrayitem = function(array) { 
    		return array[Math.floor(Math.random()*array.length)];
    	};
    
    pna = new ParticleNetworkAnimation();	pna.init($('.particle-network-animation')[0]);
    
    }());

html代码

<div class='particle-network-animation'></div>

[20200720154534449.gif]: /images/20230209/ade1c83192584c4cabfcfed9f90aa6b8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，90人围观）

还没有评论，来说两句吧...

相关阅读

相关粒子网格特效

![在这里插入图片描述][20200720154534449.gif] css @charset "utf-8"; .particle-network-an

喜欢ヅ旅行/ 2023年02月28日 05:39/ 0 赞/ 91 阅读

相关使用Unity粒子特效的基本步骤

一、Getting Started with Particle Systems 在Unity中打开已经建立好的`Starter Project`。里面的资源分为几个文件

ゝ一世哀愁。/ 2023年02月19日 01:26/ 0 赞/ 97 阅读

相关 153.炫酷粒子背景特效

效果 (源码网盘地址在最后) ![1b6c12310dd9bda1cebf98a3aeb0f77b.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

偏执的太偏执、/ 2023年01月18日 02:29/ 0 赞/ 246 阅读

相关 ProcessingJoy —— 粒子流逝特效【JAVA】

效果图 ![20210111123617546.gif][] ![20210111123910439.gif][] ![20210111124820634.gif][

淡淡的烟草味﹌/ 2023年01月02日 04:30/ 0 赞/ 248 阅读

相关 ProcessingJoy —— 多种风格的粒子特效【JAVA】

效果图第一种风格 ![20210304144523460.gif][] 遇到鼠标发生排斥的效果 ![20210304144644779.gif][] 点击鼠标产生吸

谁借莪１个温暖的怀抱￠/ 2022年11月05日 06:24/ 0 赞/ 268 阅读

相关 ShaderJoy —— 简单的粒子雨特效【GLSL】

效果图 ![20210207180928751.gif][] 粒子雨效果完整代码和注释 define PI 3.14159 define TAU

绝地灬酷狼/ 2022年10月29日 01:57/ 0 赞/ 367 阅读

相关 JavaScript鼠标跟随粒子js特效代码

[下载地址][Link 1] 交互式的网页特效，好像星座特效一样在鼠标移动的时候自动生成连接粒子特效。 ![1633956823.png][] dd: [Link 1

╰半橙微兮°/ 2022年09月16日 04:50/ 0 赞/ 317 阅读

相关 js炫酷粒子旋涡canvasjs特效

[下载地址][Link 1]基于canvas实现的js炫酷粒子旋涡html5动画特效 ![1630026580.png][] dd: [Link 1]: https:/

小灰灰/ 2022年09月08日 14:59/ 0 赞/ 386 阅读

相关 canvas动画之二 -- 创建动态粒子网格动画

最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。CSDN不能上传超过2M的图片，所以就简单截了一个静态图片： ![粒子网格][SouthEast] 可以[

桃扇骨/ 2022年07月14日 14:38/ 0 赞/ 312 阅读

相关 Silverlight C# 游戏开发：绚丽的粒子特效-粒子效果（二）

用Silverlight作粒子效果看起来还是不错，从上一篇的回复中我想到了很多，并不是只是局限于游戏，其他应用上也是非常好用的，今次带来一个小小的粒子控制系统，能够达到非常有趣

r囧r小猫/ 2022年01月15日 05:57/ 0 赞/ 348 阅读