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

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

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

因為自己需要做產品，所以好的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

#number############4######################################################################### ############retina_detect############boolean############true###### / #### ##false###################

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用Particles.js製作出仿乎超炫粒子動態背景效果程式碼介紹下一篇：使用Particles.js製作出仿乎超炫粒子動態背景效果程式碼介紹

看更多

鍵值	參數選項/ 說明	#實例
`<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