製品を作る必要があるので、優れた 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>
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});ファイルの順序に注意してください。そうでないと問題が発生します
実際のデモ
<!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>
デモをダウンロードする必要がある場合は、QQ グループにアクセスしてください。黒い原子エフェクトはとても SF で、悪くありません
独自の SF を作成してください。 CSSカラーとJSON設定ファイル
パラメータに応じた効果数値キー値 选 パラメータオプション/説明 boolean 点击效果
例
number 粒子推出数🎜🎜
ParticleS.number.value 数値数量
<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
🎜ブール値 🎜🎜🎜true🎜 / 🎜🎜false🎜<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>
<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">{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">"ランダム"</span>
<span style="color:#111111;font-family:NSimsun">particles.shape.type</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">particles.shape.image.width</span>
number
(アスペクト比の場合) 图片宽度
<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>
particles.shape.image.height🎜🎜number 🎜(アスペクト比の場合) 画像の高さ<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>
🎜🎜🎜particles.opacity.value🎜🎜🎜数値 (0 ～ 1) 不透明度🎜🎜🎜🎜0.75🎜🎜
🎜🎜particles.opacity.random🎜🎜🎜 ランダムな不透明度🎜🎜🎜 🎜 / 🎜🎜false🎜🎜
🎜🎜🎜particles.opacity.anim.enable🎜🎜🎜boolean グラデーションアニメーション🎜🎜🎜🎜true🎜 / 🎜🎜false🎜
<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
particles.opacity.anim.speed<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"></span>particles.size.random🎜🎜🎜🎜ブール原子サイズランダム🎜🎜🎜🎜true🎜🎜 / 🎜🎜false🎜🎜🎜🎜🎜🎜particles.size.anim.enable🎜🎜🎜🎜true🎜🎜 / 🎜🎜false 🎜 🎜 🎜
🎜🎜🎜particles.size.anim.speed🎜 🎜🎜🎜数値 原子勾配速度🎜🎜🎜🎜3🎜
<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 连接线
particles.size.anim.size_min<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"></span>particles.line_linked.color🎜🎜🎜🎜HEX (文字列) リンクされたラインの色🎜🎜🎜🎜#ffffff🎜🎜🎜🎜🎜🎜particles.line_linked.opacity🎜🎜🎜数値 (0 ～ 1) リンクされたラインの不透明度🎜🎜🎜0.5 tr>
🎜🎜🎜particles.line_linked.width🎜🎜🎜🎜number 幅接続線の🎜🎜🎜🎜1.5🎜
<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">particles.move.bounce</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
🎜🎜particles.move.attract.enable🎜🎜🎜boolean 原子間の引力🎜🎜🎜🎜 / 🎜 🎜 false🎜🎜
🎜🎜🎜パーティクル. move.attract.rotateX🎜🎜🎜number アトラクション 0px; マージン: 0px">🎜🎜🎜particles.move.attractY🎜 🎜🎜番号yの垂直距離🎜🎜🎜🎜1500🎜
<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 ">["グラブ", "バブル"]</span>
interactivity.events.onclick.enable<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">"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>
<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> 🎜🎜番号 击退效果持续事件🎜 (2 番目)
<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>
<span style="color:#111111;font-family: NSimsun">interactivity.events.modes.push.particles_nb</span></tr></span>
<span style="color:#111111;font-family:NSimsun">4</span>🎜🎜
<span style="color:#111111;font-family:NSimsun">interactivity.events.modes.push.particles_nb</span>🎜🎜番号🎜🎜<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>🎜🎜🎜🎜
以上がJS ライブラリ Particles.js 中国語開発マニュアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
