搜尋

首頁  >  文章  >  web前端  >  JS庫之Particles.js中文開發手冊

JS庫之Particles.js中文開發手冊

巴扎黑
巴扎黑原創
2017-09-15 09:18:482477瀏覽

因為自己需要做產品，所以好的UI介面也是很重要的，發現這種散射的原子顆粒特效還不錯。今天腳本之家小編把Particles.js中文開發手冊及particles.js參數分享給大家，需要的朋友參考下吧

因為自己需要做產品，所以一個好的UI介面也是很重要的，發現這種散射的原子顆粒特效還不錯，就弄了一個

官方github：https://github.com/VincentGarreau/particles.js/

demo製作器，注意可能需要FQ

https://codepen.io/VincentGarreau/pen/pnlso 這個可以把你製作的demo導出

http://vincentgarreau.com/particles.js/這個可以用來嘗試配置不同效果

使用方法

#載入particle.js並配置粒子：

index.html


<p id="particles-js"></p>
<script src="particles.js"></script>

app.js


#
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load(&#39;particles-js&#39;, &#39;assets/particles.json&#39;, function() {
 console.log(&#39;callback - particles.js config loaded&#39;);
});

particles.json就是主要的設定檔

注意一下檔案順序，不然會出現問題

實際demo


<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8">
 <title>particles.js</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<p id="particles-js"></p>
</body>
 <script src=&#39;particles.min.js&#39;></script> 这个玩意需要放在下面
 <script src="index.js"></script>
</html>

如有需要下載demo請到QQ群，黑色原子效果很科幻，還不錯

根據css顏色和json配置文件，就打造屬於自己的科幻效果

參數

##number   區域散佈密度大小 ##HEX (string) ##"#222222""http://mywebsite.com/assets/img/yop.png"#particles.shape.image.width100particles.shape.image. heightnumber (0 to 1)   不透明度boolean     隨機不透明度boolean            漸層動畫#3#particles.opacity.anim.opacity_min0.25particles.opacity .anim.sync / falsefalse##particles.size.anim.enablefalseparticles.size.anim. speednumberbooleanboolean      連接線falseHEX (string)   連接線顏色#particles.line_linked.opacityboolean              移動隨機方向上的隨機方向#particles.move.straight#boolean string        原子之間互動偵測true# / #false#false
鍵值 參數選項/ 說明 #實例
<span style="color:#111111;font-family:NSimsun">particles.number.value</span> number   數量 <span style="color:#111111;font-family:NSimsun">40</span>
<span style="color:#111111;font-family:NSimsun">particles.number.density.enable</span> #boolean    <span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>#
<span style="color:#111111;font-family:NSimsun">particles.number.density.value_area</span> 800<span style="color:#111111;font-family:NSimsun"></span>
#particles.color.value<span style="color:#111111;font-family:NSimsun"></span>      RGB (object) 

     HSL (object) 
     array selection (HEX) 
#      random (string)

原子的顏色

 <span style="color:#111111;font-family:NSimsun">"#b61924"</span> 
<span style="color:#111111;font-family:NSimsun">#{r:182，g:25，b:36}</span>
##{h:356, s:76, l:41}<span style="color:#111111;font-family:NSimsun"></span># 
#["#b61924", "#333333", " 999999 "]<span style="color:#111111;font-family:NSimsun"></span> 
#"隨機"<span style="color:#111111;font-family:NSimsun"></span>
##porn.shape.類型# ＃＃＃＃＃＃＃＃＃      陣列選擇原子的形狀<span style="color:#111111;font-family:NSimsun"></span>"circle"  
 #"edge"<span style="color:#111111;font-family:NSimsun"> </span>
#「三角形」<span style="color:#111111;font-family:NSimsun"> </span>
#「多邊形」<span style="color:#111111;font-family:NSimsun"> </span>
#「星狀」<span style="color:#111111;font-family:NSimsun"> ## ＃＃＃＃＃＃＃“圖像”＃＃＃＃＃ ＃<code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">["circle", "triangle", "image"]</span>
<span style="color:#111111;font-family:NSimsun">#particles.shape.stroke.width </span> number      原理的寬度 <span style="color:#111111;font-family:NSimsun">2</span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span> #particles.shape.stroke.color<span style="color:#111111;font-family:NSimsun"></span>##HEX (string)  原子顏色
<span style="color:#111111;font-family:NSimsun"></span> particles.shape.polygon.nb_slides
#########number       原子的多邊形邊數############### #####5#########################particles.shape.image.src###########path link ###svg / png / gif / jpg  原子的圖片可以使用自訂圖片		 <span style="color:#111111;font-family:NSimsun">"assets/img/yop.svg"</span># 
<span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span>
 number  (for aspect ratio)    圖片寬度<span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span>
######number ####(for aspect ratio) 圖片高度		 <span style="color:#111111;font-family:NSimsun">100</span>
##particles.opacity.value<span style="color:#111111;font-family:NSimsun"></span> 0.75<span style="color:#111111;font-family:NSimsun"></span>
particles.opacity.random<span style="color:#111111;font-family:NSimsun"></span> true<span style="color:#111111;font-family:NSimsun"></span># / #false<span style="color:#111111;font-family:NSimsun"></span>
particles.opacity.anim.enable<span style="color:#111111;font-family:NSimsun"></span> true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.speed</span> number             反射式動畫速度 <span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span># number (0 to 1)       漸層動畫不透明度
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>boolean<span style="color:#111111;font-family:NSimsun"></span>#true
<span style="color:#111111;font-family:NSimsun"></span>##################################################################################################################################################################################################################################### # ##################particles.size.value### number       原子大小 <span style="color:#111111;font-family:NSimsun">#20</span>
<span style="color:#111111;font-family:NSimsun">particles .size.random</span> boolean       原子大小隨機 <span style="color:#111111;font-family:NSimsun">true</span>## / false<span style="color:#111111;font-family:NSimsun">##true</span>## / 
<span style="color:#111111;font-family:NSimsun"></span> boolean      原子漸層<span style="color:#111111;font-family:NSimsun"></span>#true<span style="color:#111111;font-family:NSimsun"></span> / 
<span style="color:#111111;font-family:NSimsun"></span> number     原子漸變速度<span style="color:#111111;font-family:NSimsun"></span>######3###
##articles.size.anim.size_min<span style="color:#111111;font-family:NSimsun"></span> #0.25<span style="color:#111111;font-family:NSimsun"></span>
#articles.size.anim.sync<span style="color:#111111;font-family:NSimsun"></span> true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun"></span>
粒子.line_linked.enable<span style="color:#111111;font-family:NSimsun"></span> true<span style="color:#111111;font-family:NSimsun"></span> / false<span style="color:#111111;font-family:NSimsun">##true</span> / 
<span style="color:#111111;font-family:NSimsun"></span>#########articles.line_linked.distance### number       連接線距離 <span style="color:#111111;font-family:NSimsun">150</span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>## particles.line_linked.color
<span style="color:#111111;font-family:NSimsun"></span>ffffff <span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>#number (0 to 1)    連接線不透明度############# #0.5########################particles.line_linked.width###########number     連接線的寬度## ##########1.5####
<span style="color:#111111;font-family:NSimsun">particles.move.enable</span> boolean     原子移動 <span style="color:#111111;font-family:NSimsun">#true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun">#particles.move.speed</span> number     原子移動速度 <span style="color:#111111;font-family:NSimsun">4</span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span>## particles.move.direction
#########string              原子移動方向#############"none"###### ##############"none"###### ######################### #"top"###### #########"top-right"####### #########"right"###### ## #######"bottom-right"###### #####<span style="color:#111111;font-family:NSimsun">"bottom"</span> 
<span style="color:#111111;font-family:NSimsun">"bottom-left"</span> 
<span style="color:#111111;font-family:NSimsun">"left"</span>  
<span style="color:#111111;font-family:NSimsun">"top-left"</span>
<span style="color:#111111;font-family:NSimsun">#particles.move.random</span> <span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span>
## / <span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>1lean              直接移動<span style="color:#111111;font-family:NSimsun"></span>true
<span style="color:#111111;font-family:NSimsun"></span>
########################################################################################################### ## / ######false#########################particles.move.out_mode################################################################################# #string  ###(out of canvas)        是否移動出畫布		 <span style="color:#111111;font-family:NSimsun">#"out"</span> 
##"bounce"<span style="color:#111111;font-family:NSimsun"></span>
#particles.move.bounce<span style="color:#111111;font-family:NSimsun"></span>#(between particles)   是否跳動移動 <span style="color:#111111;font-family:NSimsun">true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>############################################################################ ########particles.move.attract.enable#############boolean           原子之間吸引############true#######true##################true##### # / ######false#########################particles.move.attract.rotateX##################################################################### ##number   原子之間吸引X水平距離############3000########################particles.move .attract.rotateY############number  y垂直距離#############1500###
<span style="color:#111111;font-family:NSimsun">interactivity.detect_on</span> #interactivity.detect_on<span style="color:#111111;font-family:NSimsun"></span>
#"canvas", "window"<span style="color:#111111;font-family:NSimsun"></span> #interactivity.events.onhover.enable<span style="color:#111111;font-family:NSimsun"></span> #boolean    懸停<span style="color:#111111;font-family:NSimsun"></span>
false<span style="color:#111111;font-family:NSimsun"></span>


################################################################################# ########interactivity.events.onhover.mode################string ###      array selection######停留模式 ####		 <span style="color:#111111;font-family:NSimsun">"grab"</span>     抓取臨近的
<span style="color:#111111;font-family:NSimsun">"bubble"</span>  泡棉球效果
<span style="color:#111111;font-family:NSimsun">"repulse"</span>  擊退效果
<span style="color:#111111;font-family:NSimsun">["grab", "bubble"]</span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun">interactivity.events.onclick.enable</span> boolean  點選效果


true

##################################################### / ######false#########################interactivity.events.onclick.mode##################################################################################################### ####string ###      array selection######點選效果模式###		 <span style="color:#111111;font-family:NSimsun">「推」</span> 
<span style="color:#111111;font-family:NSimsun">##「刪除」</span> 
<span style="color:#111111;font-family:NSimsun"># 「氣泡「</span> 
<span style="color:#111111;font-family:NSimsun">#『擊退』</span> 
########### ####<span style="color:#111111;font-family:NSimsun">["push", "repulse"]</span>
<span style="color:#111111;font-family:NSimsun">#interactivity.events.resize</span> #boolean         互動事件調整 <span style="color:#111111;font-family:NSimsun">#true</span> / <span style="color:#111111;font-family:NSimsun">false</span>
#false<span style="color:#111111;font-family:NSimsun"></span> #false<span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span> #false <span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span>#### ###########interactivity.events.modes.grab.distance############number        原子互動抓取距離#################### 100########################interactivity.events.modes.grab.line_linked.opacity#############number ( 0 to 1)        原子互動抓取距離連線不透明度############0.75################################################################################ interactivity.events.modes.bubble.distance### number       原子抓取泡棉效果之間的距離 <span style="color:#111111;font-family:NSimsun">100</span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span>
################ ######interactivity.events.modes.bubble.size############number       原子抓取泡棉效果之間的大小#############40 ########################interactivity.events.modes.bubble.duration################interactivity.events.modes.bubble.duration############number    原子抓取泡沫效果之間的持續事件###(second)		 <span style="color:#111111;font-family:NSimsun">0.4</span>
<span style="color:#111111;font-family:NSimsun">#interactivity.events.modes.repulse.distance</span> number       擊退效果距離 <span style="color:#111111;font-family:NSimsun">#200</span>
<span style="color:#111111;font-family:NSimsun"></span>
################################################ ###interactivity.events.modes.repulse.duration############number      擊退效果持續事件###(second)		 <span style="color:#111111;font-family:NSimsun">1.2</span>
<span style="color:#111111;font-family:NSimsun">#interactivity.events.modes.push.particles_nb</span> number         粒子推出的數量 ##4<span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span>
<span style="color:#111111;font-family:NSimsun"></span> <span style="color:#111111;font-family:NSimsun"></span><span style="color:#111111;font-family:NSimsun"></span>#interactivity.events.modes.push.particles_nb
#number############4######################################################################### ############retina_detect############boolean############true###### / #### ##false###################

以上是JS庫之Particles.js中文開發手冊的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：使用Particles.js製作出仿乎超炫粒子動態背景效果程式碼介紹下一篇：使用Particles.js製作出仿乎超炫粒子動態背景效果程式碼介紹

相關文章

看更多