particlesjs官網_html5輕量級炫酷js粒子動畫庫插件怎麼使用

1. 怎麼給html5背景加上js粒子特效

使用了particles.js

particles.js可以從github網站下載到最新的源碼，網址是 https://github.com/VincentGarreau/particles.js/

使用方法非常簡單

第一步，在html中引入腳本文件 particles.min.js，這個文件在下載的壓縮包里可以找到

<scriptsrc="particles.min.js"></script>

第二步，在html中放入一個div容器，設置id為particles-js。這個一般放在所有網頁元素的最後面就可以。

<divid="particles-js"></div>
<styletype="text/css">
#particles-js{
position:absolute;
top:0;
width:100%;
}
</style>

第三步，設置窗口樣式

<styletype="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,"ration":2,"opacity":8,"speed":3
},"repulse":{"distance":200,"ration":0.4
},"push":{"particles_nb":4
},"remove":{"particles_nb":2
}
}
},"retina_detect":true});

2. html5輕量級炫酷js粒子動畫庫插件怎麼使用

方法調用該粒子插件版：權
particlesJS('particles-js', {
particles: {
color: '#fff',
shape: 'circle',
opacity: 1,
size: 4,
size_random: true,
nb: 150,
line_linked: {
enable_auto: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1,
condensed_mode: {
enable: false,
rotateX: 600,

3. 怎樣用js做出聖誕節閃爍效果

下雪：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>漫天飛雪</title>

<styletype="text/css">
*{margin:0;padding:0;}
body{background:#6b92b9;}
canvas{display:block;}
</style>

</head>
<body>

<canvasid="canvas"></canvas>

<scripttype="text/javascript">
window.onload=function(){
//canvasinit
varcanvas=document.getElementById("canvas");
varctx=canvas.getContext("2d");

//canvasdimensions
varW=window.innerWidth;
varH=window.innerHeight;
canvas.width=W;
canvas.height=H;

//snowflakeparticles
varmp=3000;//maxparticles
varparticles=[];
for(vari=0;i<mp;i++)
{
particles.push({
x:Math.random()*W,//x-coordinate
y:Math.random()*H,//y-coordinate
r:Math.random()*3+1,//radius
d:Math.random()*mp//density
})
}

//Letsdrawtheflakes
functiondraw()
{
ctx.clearRect(0,0,W,H);

ctx.fillStyle="rgba(255,255,255,0.8)";
/*ctx.fillStyle="#FF0000";*/
ctx.beginPath();
for(vari=0;i<mp;i++)
{
varp=particles[i];
ctx.moveTo(p.x,p.y);
ctx.arc(p.x,p.y,p.r,0,Math.PI*2,true);
}
ctx.fill();
update();
}

//Functiontomovethesnowflakes
//.ntsoftheflakes
varangle=0;
functionupdate()
{
angle+=0.01;
for(vari=0;i<mp;i++)
{
varp=particles[i];
//UpdatingXandYcoordinates
//moveupwards
//fferentforeachflake
//
p.y+=Math.cos(angle+p.d)+1+p.r/2;
p.x+=Math.sin(angle)*2;

//
//.
if(p.x>W||p.x<0||p.y>H)
{
if(i%3>0)//66.67%oftheflakes
{
particles[i]={x:Math.random()*W,y:-10,r:p.r,d:p.d};
}
else
{
//
if(Math.sin(angle)>0)
{
//Enterfromth
particles[i]={x:-5,y:Math.random()*H,r:p.r,d:p.d};
}
else
{
//Enterfromtheright
particles[i]={x:W+5,y:Math.random()*H,r:p.r,d:p.d};
}
}
}
}
}

//animationloop
setInterval(draw,15);
}
</script>

</body>
</html>

大雪花：

<!DOCTYPEHTML>
<html>

<head>
<metacharset="UTF-8"/>
<title>snowingsnow</title>
<style>
body{
background:#eee;
}

@keyframesmysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
transform:rotate(1080deg);
}
100%{
transform:rotate(0deg);
opacity:0;
bottom:0;
}
}

@-webkit-keyframesmysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-webkit-transform:rotate(1080deg);
}
100%{
-webkit-transform:rotate(0deg);
opacity:0;
bottom:0;
}
}

@-moz-keyframesmysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-moz-transform:rotate(1080deg);
}
100%{
-moz-transform:rotate(0deg);
opacity:0;
bottom:0;
}
}

@-ms-keyframesmysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-ms-transform:rotate(1080deg);
}
100%{
-ms-transform:rotate(0deg);
opacity:0;
bottom:0;
}
}

@-o-keyframesmysnow{
0%{
bottom:100%;
opacity:0;
}
50%{
opacity:1;
-o-transform:rotate(1080deg);
}
100%{
-o-transform:rotate(0deg);
opacity:0;
bottom:0;
}
}

.roll{
position:absolute;
opacity:0;
animation:mysnow5s;
-webkit-animation:mysnow5s;
-moz-animation:mysnow5s;
-ms-animation:mysnow5s;
-o-animation:mysnow5s;
height:80px;
}

.div{
position:fixed;
}
</style>
</head>

<body>
<divid="snowzone">
</div>
</body>
<script>
(function(){
functionsnow(left,height,src){
vardiv=document.createElement("div");
varimg=document.createElement("img");
div.appendChild(img);
img.className="roll";
img.src=src;
div.style.left=left+"px";
div.style.height=height+"px";
div.className="div";
document.getElementById("snowzone").appendChild(div);
setTimeout(function(){
document.getElementById("snowzone").removeChild(div);
//console.log(window.innerHeight);
},5000);
}
setInterval(function(){
varleft=Math.random()*window.innerWidth;
varheight=Math.random()*window.innerHeight;
varsrc="s"+Math.floor(Math.random()*2+1)+".png";//兩張圖片分別為"s1.png"、"s2.png"
snow(left,height,src);
},500);
})();
</script>

</html>

上面需要的圖片

導航:首頁 > 編程語言 > particlesjs官網

particlesjs官網

與particlesjs官網相關的資料

友情鏈接