ホームページ > 記事 > ウェブフロントエンド > JS ライブラリ Particles.js 中国語開発マニュアル

JS ライブラリ Particles.js 中国語開発マニュアル

巴扎黑オリジナル: 2017-09-15 09:18:482401ブラウズ

製品を作る必要があるので、優れた UI インターフェイスも非常に重要です。この種の散乱原子粒子の特殊効果は悪くないことがわかりました。今日、Script House の編集者が Particles.js の中国語開発マニュアルと Particles.js のパラメーターを共有しました。必要な友達はそれを参照してください

私は製品を作る必要があるので、優れた UI インターフェイスも非常に重要です。これを見つけました。散乱原子粒子の特殊効果は非常に優れているので、公式 github を作成しました: https://github.com/VincentGarreau/particles.js/

デモメーカー、FQ が必要な場合があることに注意してください

https: //codepen.io /VincentGarreau/pen/pnlso これにより、作成したデモをエクスポートできます

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がメインの構成ファイルです

ファイルの順序に注意してください。そうでないと問題が発生します

実際のデモ

<!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>

デモをダウンロードする必要がある場合は、QQ グループにアクセスしてください。黒い原子エフェクトはとても SF で、悪くありません

独自の SF を作成してください。 CSSカラーとJSON設定ファイル

パラメータに応じた効果

数値キー値选パラメータオプション/説明

例 ParticleS.number.value 数値数量 🎜ブール値 🎜🎜🎜true🎜 / 🎜🎜false🎜{h:356, s:76, l :41} particles.shape.typeparticles.shape.image.width
number 100
particles.shape.image.height🎜🎜number 🎜(アスペクト比の場合) 画像の高さ🎜🎜🎜particles.opacity.value🎜🎜🎜数値 (0 ～ 1) 不透明度🎜🎜🎜🎜0.75🎜🎜🎜🎜particles.opacity.random🎜🎜🎜 ランダムな不透明度🎜🎜🎜 🎜 / 🎜🎜false🎜🎜🎜🎜🎜particles.opacity.anim.enable🎜🎜🎜boolean グラデーションアニメーション🎜🎜🎜🎜true🎜 / 🎜🎜false🎜particles.opacity.anim.speed20particles.size.random🎜🎜🎜🎜ブール原子サイズランダム🎜🎜🎜🎜true🎜🎜 / 🎜🎜false🎜🎜🎜🎜🎜🎜particles.size.anim.enable🎜🎜🎜🎜true🎜🎜 / 🎜🎜false 🎜 🎜 🎜🎜🎜🎜particles.size.anim.speed🎜 🎜🎜🎜数値原子勾配速度🎜🎜🎜🎜3🎜particles.size.anim.size_min150particles.line_linked.color🎜🎜🎜🎜HEX (文字列) リンクされたラインの色🎜🎜🎜🎜#ffffff🎜🎜🎜🎜🎜🎜particles.line_linked.opacity🎜🎜🎜数値 (0 ～ 1) リンクされたラインの不透明度🎜🎜🎜0.5 tr>🎜🎜🎜particles.line_linked.width🎜🎜🎜🎜number 幅接続線の🎜🎜🎜🎜1.5🎜 particles.move.bouncetrue🎜🎜particles.move.attract.enable🎜🎜🎜boolean 原子間の引力🎜🎜🎜🎜 / 🎜 🎜 false🎜🎜🎜🎜🎜パーティクル. move.attract.rotateX🎜🎜🎜number アトラクション 0px; マージン: 0px">🎜🎜🎜particles.move.attractY🎜 🎜🎜番号yの垂直距離🎜🎜🎜🎜1500🎜" 击退效果
interactivity.events.onclick.enable
boolean 点击效果
🎜true / false🎜🎜interactivity.events.onclick.mode🎜🎜🎜文字列🎜 配列選択🎜🎜点击效果モード🎜interactivity.events.modes.repulse. distance🎜interactivity.events.modes.repulse.duration 🎜🎜番号击退效果持续事件🎜 (2 番目)interactivity.events.modes.push.particles_nb</tr>

number 粒子推出数🎜🎜4🎜🎜 interactivity.events.modes.push.particles_nb🎜🎜番号🎜🎜4🎜🎜 🎜retina_detect🎜🎜boolean🎜 true / false🎜🎜🎜🎜

以上がJS ライブラリ Particles.js 中国語開発マニュアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Particles.js を使用して、Zhihu を模倣した見事な粒子の動的な背景効果を作成するコードの紹介次の記事：Particles.js を使用して、Zhihu を模倣した見事な粒子の動的な背景効果を作成するコードの紹介

続きを見る


`<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>`40 `<span style="color:#111111;font-family:NSimsun"></span>🎜🎜🎜particles.number.density.enable🎜`
`<span style="color:#111111;font -family:NSimsun">particles.number.density.value_area</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">particles.number.density.value_area</span>`	number 区域散布密度大小	`<span style="color:#111111;font-family:NSimsun">800</span>`
`<span style="color:#111111;font-family:NSimsun">particles.color.value</span>`	number 領域散布密度大 `<span style="color:#111111;font-family:NSimsun">800</span>` `<span style="color:#111111;font-family:NSimsun">particles.color.value</span>` 🎜HEX (文字列) 🎜 RGB (オブジェクト) 🎜 HSL (オブジェクト) 🎜 配列選択 (16 進数) 🎜 ランダム (文字列)🎜🎜原子の颜色🎜	`<span style="color:#111111;font-family: NSimsun">"#b61924"</span>` `<span style="color:#111111;font-family:NSimsun">"#b61924"</span>` `<span style="color:#111111;font-family:NSimsun">{r:182, g:25, b:36}</span>` `<span style="color:#111111;font-family:NSimsun">{h:356, s:76, l:41}</span>` `<span style="color:#111111;font-family:NSimsun">["#b61924", "#333333", "999999"]</span>` `<span style="color:#111111;font-family:NSimsun">"random"</span>`
`<span style="color:#111111;font-family:NSimsun">particles.shape.type</span>{r:182, g:25, b:36}`	`<span style="color:#111111;font-family:NSimsun">["#b61924", "#333333", "999999"]</span>` `<span style="color:#111111;font-family:NSimsun">"ランダム"</span>`
`<span style="color:#111111;font-family:NSimsun">"circle"</span>` `<span style="color:#111111;font-family:NSimsun">"edge"</span>` `<span style="color:#111111;font-family:NSimsun">"triangle"</span>` `<span style="color:#111111;font-family:NSimsun">"polygon"</span>` `<span style="color:#111111;font-family:NSimsun">"star"</span>` `<span style="color:#111111;font-family:NSimsun">"image"</span>`string 配列選択原子の形状🎜🎜`<span style="color:#111111 ;font-family:NSimsun">"circle"</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">["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">particles.shape.stroke.color</span>`	HEX (string) 原子颜色	`<span style="color:#111111;font-family:NSimsun">"#222222"</span>`
`<span style="color:#111111;font-family:NSimsun">particles.shape.polygon.nb_slides</span>`	number 原子的多边形边数	`<span style="color:#111111;font-family:NSimsun">5</span>`
`<span style="color:#111111;font-family:NSimsun">particles.shape.image.src</span>`	パスリンク svg / png / gif / jpg 原子の画像は独自の画像を使用できます	`<span style="color:#111111;font-family:NSimsun">"assets/img/yop.svg"</span>` `<span style="color:#111111;font-family:NSimsun">"assets/img/yop.svg"</span>` `<span style="color:#111111;font-family:NSimsun">"http://mywebsite.com/assets/img/yop.png"</span>`
`<span style="color:#111111;font-family:NSimsun">particles.shape.image.width</span><span style="color:#111111;font-family:NSimsun">"http://mywebsite.com/assets/img/ yop.png"</span>`
(アスペクト比の場合) 图片宽度`<span style="color:#111111;font-family:NSimsun">100</span>`
`<span style="color:#111111;font-family:NSimsun">particles.shape.image.height</span>`
`<span style="color:#111111;font-family:NSimsun">100</span>`
`<span style="color:#111111;font-family:NSimsun">particles.opacity.value</span>`	number (0 to 1) 不透明度	`<span style="color:#111111;font-family:NSimsun">0.75</span>`
`<span style="color:#111111;font-family:NSimsun">particles.opacity.random</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.opacity.anim.enable</span>`	boolean 渐变动画	`<span style="color:#111111;font-family:NSimsun">true</span>100<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">3</span>`
`<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.opacity_min</span>`	number (0 to 1) 渐变动画不透明度	`<span style="color:#111111;font-family:NSimsun">0.25</span>`
`<span style="color:#111111;font-family:NSimsun">particles.opacity.anim.sync</span>`	boolean	`<span style="color:#111111;font-family:NSimsun">true</span>` / `<span style="color:#111111;font-family:NSimsun">false</span>`
`number グラデーションアニメーションの速度 <span style="color:#111111;font-family:NSimsun"></span>🎜🎜3🎜🎜🎜🎜🎜 🎜🎜🎜particles.opacity.anim.opacity_min🎜🎜🎜🎜number (0 1) グラデーションアニメーションの不透明度🎜🎜🎜🎜0.25🎜🎜🎜🎜🎜🎜🎜🎜particles.opacity.anim.sync🎜🎜🎜🎜boolean🎜🎜🎜🎜true🎜 🎜 / 🎜🎜偽🎜🎜🎜🎜🎜🎜🎜🎜粒子のサイズの値🎜`	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>` / `<span style="color:#111111;font-family:NSimsun">false</span>`
`<span style="color:#111111;font-family:NSimsun">particles.size.anim.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.size.anim.speed</span>`
`<span style="color:#111111;font-family:NSimsun">particles.size.anim.size_min</span>`	number	`<span style="color:#111111;font-family:NSimsun">0.25</span>`
`<span style="color:#111111;font-family:NSimsun">particles.size.anim.sync</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.line_linked.enable</span>`	boolean 连接线	`<span style="color:#111111;font-family:NSimsun">true</span>` / `<span style="color:#111111;font-family:NSimsun">false</span>`
`number<span style="color:#111111;font-family:NSimsun"></span>🎜🎜0.25🎜🎜🎜🎜🎜🎜🎜🎜particles.size.anim.sync 🎜🎜🎜🎜ブール値🎜🎜🎜🎜true🎜 🎜 / 🎜🎜false🎜🎜🎜🎜🎜🎜🎜🎜particles.line_linked.enable🎜🎜🎜🎜boolean 🎜🎜🎜🎜true🎜🎜 / 🎜 🎜false🎜 🎜🎜🎜🎜🎜🎜🎜particles.line_linked. distance🎜`	number 接続線の距離	`<span style="color:#111111;font-family:NSimsun">150</span>`
`<span style="color:#111111;font-family:NSimsun">particles.line_linked.color</span>`	HEX (string) 连接线颜色	`<span style="color:#111111;font-family:NSimsun">#ffffff</span>`
`<span style="color:#111111;font-family:NSimsun">particles.line_linked.opacity</span>`	number (0 to 1) 连接线不透明度	`<span style="color:#111111;font-family:NSimsun">0.5</span>`
`<span style="color:#111111;font-family:NSimsun">particles.line_linked.width</span>`
`<span style="color:#111111;font -family:NSimsun">particles.move.enable</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><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">particles.move.direction</span>`	string 原子移动方向	`<span style="color:#111111;font-family:NSimsun">"none"</span>` `<span style="color:#111111;font-family:NSimsun">"top"</span>` `<span style="color:#111111;font-family:NSimsun">"top-right"</span>` `<span style="color:#111111;font-family:NSimsun">"right"</span>` `<span style="color:#111111;font-family:NSimsun">"bottom-right"</span>` 🎜boolean 原子移動🎜🎜<span style="color:#111111;font-family:NSimsun">true</span>🎜 / <span style="color:#111111;font-family:NSimsun">false</span>🎜🎜🎜🎜🎜particles.move.speed span>🎜🎜🎜number 原子移動速度🎜🎜4🎜🎜🎜🎜<span style="color:#111111;font-family:NSimsun">particles.move.direction</span>🎜🎜🎜string 原子移動方向🎜🎜<span style="color:#111111;font-family:NSimsun">"none"</span>🎜 🎜<span style="color:#111111;font-family:NSimsun">"top"</span>🎜 🎜"右上"🎜 🎜<span style="color:#111111;font-family:NSimsun">"right"</span>🎜 🎜<span style="color:#111111;font-family:NSimsun">"bottom-right"</span>🎜 🎜"bottom" <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>`	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.straight</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.out_mode</span>`	文字列 (キャンバス外) 否移アニメーション出画布	`<span style=" color:#111111;font-family:NSimsun">"out"</span>` `<span style="color:#111111;font-family:NSimsun">"out"</span>` `<span style="color:#111111;font-family:NSimsun">"bounce"</span>`
`<span style="color:#111111;font-family:NSimsun">particles.move.bounce</span><span style="color:#111111;font-family:NSimsun">「バウンス」</span>`
ブール値 🎜(パーティクル間) ジャンプして移動するかどうか	`<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.attract.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.attract.rotateX</span>`	number 原子之间吸引X水平距离	`<span style="color:#111111;font-family:NSimsun">3000</span>`
`<span style="color:#111111;font-family:NSimsun">particles.move.attract.rotateY</span>`	/	false
`<span style="color:#111111;font -family:NSimsun">interactivity.detect_on</span><code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">interactivity.detect_on</span>`	string 原子之间互动检测	`<span style="color:#111111;font-family:NSimsun">"canvas", "window"</span>`
`<span style="color:#111111;font-family:NSimsun">interactivity.events.onhover.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">interactivity.events.onhover.mode</span>`	string 原子之间相互测 `<span style="color:#111111;font-family:NSimsun">"キャンバス"、"ウィンドウ"</span>` 🎜🎜`interactivity.events.onhover. /span>🎜🎜🎜boolean 悬停🎜🎜true🎜 / <span style="color:#111111;font-family:NSimsun">false</span>🎜🎜🎜🎜🎜<span style="color:#111111;font-family:NSimsun">interactivity.events.onhover.mode</span>🎜🎜🎜🎜string 🎜 配列選択🎜🎜悬停止モード🎜`	`<span style="color:#111111;font-family: NSimsun">"grab"</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">interactivity.events.onclick.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">interactivity.events.onclick.mode</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"</span>` `<span style="color:#111111;font-family:NSimsun">"remove"</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">["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>`
`<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.grab.distance</span>`	number 原子互动抓取距离	`<span style="color:#111111;font-family:NSimsun">100</span>`
`<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.grab.line_linked.opacity</span>`	number (0 to 1) 原子互动抓取距离连线不透明度	`<span style="color:#111111;font-family:NSimsun">0.75</span>`
`<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble. distance</span>`	number 原子抓取泡沫效果之间の距離	`100<span style="color:#111111;font-family:NSimsun">100</span>`
`<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.size</span>`	number 原子抓取泡沫效果之间的大小	`<span style="color:#111111;font-family:NSimsun">40</span>`
`<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.duration</span>`
interactivity.events.modes.bubble.size 🎜🎜number 原子抓取泡沫效果之间の大小🎜🎜<span style="color:#111111;font-family:NSimsun">🎜🎜<tr style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px">🎜<code style="padding-bottom: 0px; padding -top: 0px; 余白: 0px; 余白: 0px"><span style="color:#111111;font-family:NSimsun">interactivity.events.modes.bubble.durationスパン>🎜🎜🎜番号原子抓取泡沫效果之间的持续イベント🎜 (2 番目)</span><td style="border-top: silver 1px solid; border-right: silver 1px solid; border-collapse: collapse; border-bottom: silver 1px solid; padding-bottom: 3px; padding-top: 3px; padding-left: 3px; margin: 0px; border-left: silver 1px solid; padding-right: 3px"> <code style="padding-bottom: 0px;padding-top: 0px;padding-left: 0px; margin: 0px;padding-right: 0px"><span style="color:#111111;font -family:NSimsun">0.4</span>`<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">interactivity.events.modes.repulse.duration</span>`
number 击退效果距離🎜🎜`<span style="color:#111111;font-family:NSimsun">200</span>`🎜
`<span style="color:#111111;font -family:NSimsun">1.2</span><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 粒子推出的数量	`<span style="color:#111111;font-family:NSimsun">4</span>`
`<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.push.particles_nb</span>`	number	`<span style="color:#111111;font-family:NSimsun">4</span>`
`<span style="color:#111111;font-family:NSimsun">retina_detect</span>`	boolean	`<span style="color:#111111;font-family:NSimsun">true</span>` / `<span style="color:#111111;font-family:NSimsun">false</span>`