html炫酷粒子特效(html粒子效果)
抖音HTML龙卷风特效代码是啥？
!DOCTYPE html
html
head
meta charset="utf-8"
title粒子漩涡特效/title
style
html,body{
margin:0px;
width:100%;
height:100%;
overflow:hidden;
background:#000;
}
#canvas{
position:absolute;
width:100%;
height:100%;
}
/style
/head
body
canvas id="canvas"/canvas
script
function project3D(x,y,z,vars){
var p,d;
x-=vars.camX;
y-=vars.camY-8;
z-=vars.camZ;
p=Math.atan2(x,z);
d=Math.sqrt(x*x+z*z);
x=Math.sin(p-vars.yaw)*d;
z=Math.cos(p-vars.yaw)*d;
p=Math.atan2(y,z);
d=Math.sqrt(y*y+z*z);
y=Math.sin(p-vars.pitch)*d;
z=Math.cos(p-vars.pitch)*d;
var rx1=-1000;
var ry1=1;
var rx2=1000;
var ry2=1;
var rx3=0;
var ry3=0;
var rx4=x;
var ry4=z;
var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
if(!z)z=0.000000001;
if(ua0ua1ub0ub1){
return {
x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,
y:vars.cy+y/z*vars.scale,
d:(x*x+y*y+z*z)
};
}else{
return { d:-1 };
}
}
function elevation(x,y,z){
var dist = Math.sqrt(x*x+y*y+z*z);
if(dist z/dist=-1 z/dist =1) return Math.acos(z / dist);
return 0.00000001;
}
function rgb(col){
col += 0.000001;
var r = parseInt((0.5+Math.sin(col)*0.5)*16);
var g = parseInt((0.5+Math.cos(col)*0.5)*16);
var b = parseInt((0.5-Math.sin(col)*0.5)*16);
return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}
function interpolateColors(RGB1,RGB2,degree){
var w2=degree;
var w1=1-w2;
return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]];
}
function rgbArray(col){
col += 0.000001;
var r = parseInt((0.5+Math.sin(col)*0.5)*256);
var g = parseInt((0.5+Math.cos(col)*0.5)*256);
var b = parseInt((0.5-Math.sin(col)*0.5)*256);
return [r, g, b];
}
function colorString(arr){
var r = parseInt(arr[0]);
var g = parseInt(arr[1]);
var b = parseInt(arr[2]);
return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);
}
function process(vars){
if(vars.points.lengthvars.initParticles) for(var i=0;i5;++i) spawnParticle(vars);
var p,d,t;
p = Math.atan2(vars.camX, vars.camZ);
d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
d -= Math.sin(vars.frameNo / 80) / 25;
t = Math.cos(vars.frameNo / 300) / 165;
vars.camX = Math.sin(p + t) * d;
vars.camZ = Math.cos(p + t) * d;
vars.camY = -Math.sin(vars.frameNo / 220) * 15;
vars.yaw = Math.PI + p + t;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
var t;
for(var i=0;ivars.points.length;++i){
x=vars.points[i].x;
y=vars.points[i].y;
z=vars.points[i].z;
d=Math.sqrt(x*x+z*z)/1.0075;
t=.1/(1+d*d/5);
p=Math.atan2(x,z)+t;
vars.points[i].x=Math.sin(p)*d;
vars.points[i].z=Math.cos(p)*d;
vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);
if(vars.points[i].yvars.vortexHeight/2 || d.25){
vars.points.splice(i,1);
spawnParticle(vars);
}
}
}
function drawFloor(vars){
var x,y,z,d,point,a;
for (var i = -25; i = 25; i += 1) {
for (var j = -25; j = 25; j += 1) {
x = i*2;
z = j*2;
y = vars.floor;
d = Math.sqrt(x * x + z * z);
point = project3D(x, y-d*d/85, z, vars);
if (point.d != -1) {
size = 1 + 15000 / (1 + point.d);
a = 0.15 - Math.pow(d / 50, 4) * 0.15;
if (a 0) {
vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
}
}
}
}
vars.ctx.fillStyle = "#82f";
for (var i = -25; i = 25; i += 1) {
for (var j = -25; j = 25; j += 1) {
x = i*2;
z = j*2;
y = -vars.floor;
d = Math.sqrt(x * x + z * z);
point = project3D(x, y+d*d/85, z, vars);
if (point.d != -1) {
size = 1 + 15000 / (1 + point.d);
a = 0.15 - Math.pow(d / 50, 4) * 0.15;
if (a 0) {
vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
}
}
}
}
}
function sortFunction(a,b){
return b.dist-a.dist;
}
function draw(vars){
vars.ctx.globalAlpha=.15;
vars.ctx.fillStyle="#000";
vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
drawFloor(vars);
var point,x,y,z,a;
for(var i=0;ivars.points.length;++i){
x=vars.points[i].x;
y=vars.points[i].y;
z=vars.points[i].z;
point=project3D(x,y,z,vars);
if(point.d != -1){
vars.points[i].dist=point.d;
size=1+vars.points[i].radius/(1+point.d);
d=Math.abs(vars.points[i].y);
a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8;
vars.ctx.globalAlpha=a=0a=1?a:0;
vars.ctx.fillStyle=rgb(vars.points[i].color);
if(point.x-1point.xvars.canvas.widthpoint.y-1point.yvars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
}
}
vars.points.sort(sortFunction);
}
function spawnParticle(vars){
var p,ls;
pt={};
p=Math.PI*2*Math.random();
ls=Math.sqrt(Math.random()*vars.distributionRadius);
pt.x=Math.sin(p)*ls;
pt.y=-vars.vortexHeight/2;
pt.vy=vars.initV/20+Math.random()*vars.initV;
pt.z=Math.cos(p)*ls;
pt.radius=200+800*Math.random();
pt.color=pt.radius/1000+vars.frameNo/250;
vars.points.push(pt);
}
function frame(vars) {
if(vars === undefined){
var vars={};
vars.canvas = document.querySelector("canvas");
vars.ctx = vars.canvas.getContext("2d");
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
window.addEventListener("resize", function(){
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;
}, true);
vars.frameNo=0;
vars.camX = 0;
vars.camY = 0;
vars.camZ = -14;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
vars.yaw = 0;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;
vars.bounding=10;
vars.scale=500;
vars.floor=26.5;
vars.points=[];
vars.initParticles=700;
vars.initV=.01;
vars.distributionRadius=800;
vars.vortexHeight=25;
}
vars.frameNo++;
requestAnimationFrame(function() {
frame(vars);
});
process(vars);
draw(vars);
}
frame();
/script
/body
/html
前端 | 利用particles.js实现粒子动效
最近做了一个PC站首页demo，为了让页面不至于太死板，在背景上给一些模块加入了这种粒子效果，
移动端demo：
PC端demo：
线上test：
如果需要看源码实现可以在github上看看：
具体实现：
配置可参考：
当然也可直接看
通过不同的配置可以实现很多不一样的效果哦。动手去试试吧。
没做这个之前，都不知道这叫什么，只知道有时候会在一些网站上看到，也没太注意，真正想要用的时候，不知道去搜什么，所在在找的过程中也花了一点时间，如果你也需要这种效果，那么这篇文章适合你看看哦。
不是每一次努力都有收获，但是，每一次收获都必须努力。加油。
怎么给html5背景加上js粒子特效
使用了particles.js
particles.js可以从github网站下载到最新的源码，网址是
使用方法非常简单
第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到
script?src="particles.min.js"/script
第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
div?id="particles-js"/div
style?type="text/css"
#particles-js?{
position:?absolute;
top:0;
width:100%;
}
/style
第三步，设置窗口样式
style?type="text/css"
#particles-js?{
z-index:?-1;
position:?absolute;
top:?0;
width:?100%;
background:?#aaa;
}/style
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在script标签里。无论如何，这段脚本要出现在div容器之后。
particlesJS("particles-js",?{??"particles":?{????"number":?{??????"value":?380,??????"density":?{????????"enable":?true,????????"value_area":?800
??????}
????},????"color":?{??????"value":?"#ffffff"
????},????"shape":?{??????"type":?"circle",??????"stroke":?{????????"width":?0,????????"color":?"#000000"
??????},??????"polygon":?{????????"nb_sides":?5
??????},??????"image":?{????????"src":?"img/github.svg",????????"width":?100,????????"height":?100
??????}
????},????"opacity":?{??????"value":?0.5,??????"random":?false,??????"anim":?{????????"enable":?false,????????"speed":?1,????????"opacity_min":?0.1,????????"sync":?false
??????}
????},????"size":?{??????"value":?3,??????"random":?true,??????"anim":?{????????"enable":?false,????????"speed":?40,????????"size_min":?0.1,????????"sync":?false
??????}
????},????"line_linked":?{??????"enable":?true,??????"distance":?150,??????"color":?"#ffffff",??????"opacity":?0.4,??????"width":?1
????},????"move":?{??????"enable":?true,??????"speed":?6,??????"direction":?"none",??????"random":?false,??????"straight":?false,??????"out_mode":?"out",??????"bounce":?false,??????"attract":?{????????"enable":?false,????????"rotateX":?600,????????"rotateY":?1200
??????}
????}
??},??"interactivity":?{????"detect_on":?"canvas",????"events":?{??????"onhover":?{????????"enable":?true,????????"mode":?"grab"
??????},??????"onclick":?{????????"enable":?true,????????"mode":?"push"
??????},??????"resize":?true
????},????"modes":?{??????"grab":?{????????"distance":?140,????????"line_linked":?{??????????"opacity":?1
????????}
??????},??????"bubble":?{????????"distance":?400,????????"size":?40,????????"duration":?2,????????"opacity":?8,????????"speed":?3
??????},??????"repulse":?{????????"distance":?200,????????"duration":?0.4
??????},??????"push":?{????????"particles_nb":?4
??????},??????"remove":?{????????"particles_nb":?2
??????}
????}
??},??"retina_detect":?true});
酷炫的基于HTML5的2D和3D粒子引擎——Proton
Proton是一个灵活的html5粒子引擎。他默认支持canvas,dom,webgl,easeljs,pixel五种渲染方式，当然你还可以轻易的自定义自己的渲染器。只需10几行代码就可以打造你想要的粒子效果。同时具有2D版本和3D版本，适合不同的使用场景！
2D版本:
3D版本:
3D版本：
下面通过录制的Gif来演示一部分效果，上面已经有一些了，下面再展示一些：
Proton是一个实现例子效果非常合适的2D和3D例子效果库，非常简单实用，从上面的动图效果也能看出来实现的效果非常的炫酷，而且代码非常简单，文档又非常详细！
如何轻松制作炫酷的游戏特效
如何轻松制作炫酷的游戏特效
对于大型的游戏，一般需要几十个人的团队制作几年;而小游戏则可能只需一个人制作几天。以下是我整理的关于轻松制作炫酷的游戏特效的技巧，希望大家认真阅读!
修改前
修改后
作业分析
1、人物脚下魔法阵的旋转速度，上升的能量，法阵上的的符文旋转速度，还有飞剑插到地上时爆发的能量和飞溅的碎石，这些地方的节奏都偏慢，减弱了技能的.打击感。
2、人物身上的能量和地裂贴图残留时间太长，这些都使得技能显得拖沓。
人物脚下的法阵细节不足，看上去比较简单，飞剑出现后天空上的能量残留也不太好看。
修改过程
1、调整攻击部分的节奏和效果。
先把所有粒子的循环播放选项取消掉，接着把爆点、地裂粒子的寿命都调小一些，碎石粒子的速度调大一些，再调整一下飞剑的能量残留。
2、增强一下技能的打击感。
把符文的旋转速度调快些，在飞剑冲击地面时，给摄像机k上一个镜头抖动来增强冲击感。
3、调整魔法阵效果。
先来调整一下上升粒子的动态，再给魔法阵加上更多的细节效果。
课堂小结
1、制作攻击技能时一定要注意技能的整体节奏，如果节奏偏慢会使技能显得拖沓和缺少冲击力。
2、在细节上也要加上更多的变化，例如制作魔法阵效果，可以用两个不同贴图和相反旋转方向的法阵来制作。
;