因為自己需要做產品，所以好的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('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});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='particles.min.js'></script> 这个玩意需要放在下面 <script src="index.js"></script> </html>
如有需要下載demo請到QQ群，黑色原子效果很科幻，還不錯
根據css顏色和json配置文件，就打造屬於自己的科幻效果
參數
| 鍵值 | 參數選項/ 說明 | #實例 |
|---|---|---|
<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> | ##number 區域散佈密度大小800<span style="color:#111111;font-family:NSimsun"></span> |
|
#particles.color.value<span style="color:#111111;font-family:NSimsun"></span> | ##HEX (string)
RGB (object)
HSL (object) |
<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>
| "http://mywebsite.com/assets/img/yop.png"
<span style="color:#111111;font-family:NSimsun"></span> | #particles.shape.image.widthnumber
(for aspect ratio) 圖片寬度<span style="color:#111111;font-family:NSimsun"></span>
| 100|
<span style="color:#111111;font-family:NSimsun"></span> | particles.shape.image. height
######number ####(for aspect ratio) 圖片高度 |
<span style="color:#111111;font-family:NSimsun">100</span> |
##particles.opacity.value<span style="color:#111111;font-family:NSimsun"></span> | number (0 to 1) 不透明度0.75<span style="color:#111111;font-family:NSimsun"></span> |
|
particles.opacity.random<span style="color:#111111;font-family:NSimsun"></span> | boolean 隨機不透明度
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> | boolean 漸層動畫
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> |
#particles.opacity.anim.opacity_min | <span style="color:#111111;font-family:NSimsun"></span># number (0 to 1) 漸層動畫不透明度 |
<span style="color:#111111;font-family:NSimsun"></span> |
particles.opacity .anim.sync |
<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>## /
| false
<span style="color:#111111;font-family:NSimsun"></span> | ##particles.size.anim.enable
boolean 原子漸層<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.size.anim. speednumber 原子漸變速度<span style="color:#111111;font-family:NSimsun"></span>######3### |
|
##articles.size.anim.size_min<span style="color:#111111;font-family:NSimsun"></span> | number#0.25<span style="color:#111111;font-family:NSimsun"></span> |
|
#articles.size.anim.sync<span style="color:#111111;font-family:NSimsun"></span> | boolean
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> | boolean 連接線
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> |
#particles.line_linked.opacity | <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> |
#particles.move.straight |
<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> | #boolean #(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> | string 原子之間互動偵測|
#"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>
| true|
false<span style="color:#111111;font-family:NSimsun"></span> |
|
<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> | #false
<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 |
以上是JS庫之Particles.js中文開發手冊的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。
JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。
JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。
javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。
foreach是es6里的吗May 05, 2022 pm 05:59 PMforeach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。
整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
在哪裡可以找到原子中的起重機控制鑰匙卡
1 週前ByDDD
熱工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
SublimeText3 Linux新版
SublimeText3 Linux最新版
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
