tsparticles
tsParticles 3.0.2
粒子を作成するための軽量タイプスクリプトライブラリ。依存関係（*）、ブラウザの準備ができており、React.js、vue.js（2.xおよび3.x）、Angular、Svelte、jquery、Preacy、Inferno、Riot.js、Solid.js、およびWebコンポーネントと互換性があります
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpressドキュメントと開発の参照はこちら
このライブラリは、最も人気のある2つのCDNで利用でき、Particles.jsを使用している場合はさらに簡単に使用できます。
必要なすべてのリンクを使用して、以下の手順を見つけます。TypeScriptに怖がらないでください。これは単なるソース言語です。
出力ファイルはJavaScriptです。 ？
CDNSとnpmには、 JavaScriptに必要なすべてのソース、バンドルブラウザReady（tsparticles.engine.min.js）、およびimportのためにすべてのファイルが分割されています。
興味がある場合は、古いParticles.jsライブラリから移行するように導くために、すぐにいくつかの簡単な指示があります。
これらのホストまたはあなた自身のホストを使用して、プロジェクトにtsparticlesをロードしてください
https://unpkg.com/@tsparticlics/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https://unpkg.com/@tsparticles/basic/ https//unpkg/ https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/
TSPARTICLES SUMPETTI
Tsparticlesエンジン
Tsparticles花火
Tsparticles Basic
tsparticles slim
tsparticles
tsparticlesすべて
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ;インポートされたtsParticles 、 <script>タグを使用してページにスクリプトを含めるときに持っているインスタンスと同じです。
TSPARTICLESをロードし、粒子を構成します。
index.html
< div id =" tsparticles " > </ div >
< script src =" tsparticles.engine.min.js " > </ script >app.js
// @path-json can be an object or an array, the first will be loaded directly, and the object from the array will be randomly selected
/* tsParticles.load(@params); */
tsParticles
. load ( {
id : "tsparticles" ,
url : "presets/default.json" ,
} )
. then ( container => {
console . log ( "callback - tsparticles config loaded" ) ;
} )
. catch ( error => {
console . error ( error ) ;
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : {
/* options here */
} ,
} ) ;
//or
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
} ) ;
//random object
tsParticles . load ( {
id : "tsparticles" ,
options : [
{
/* options here */
} ,
{
/* other options here */
} ,
] ,
index : 1 ,
} ) ; //the second one
// Important! If the index is not in range 0...<array.length, the index will be ignored.
// after initialization this can be used.
/* tsParticles.setOnClickHandler(@callback); */
/* this will be fired from all particles loaded */
tsParticles . setOnClickHandler ( ( event , particles ) => {
/* custom on click handler */
} ) ;
// now you can control the animations too, it's possible to pause and resume the animations
// these methods don't change the config so you're safe with all your configurations
// domItem(0) returns the first tsParticles instance loaded in the dom
const particles = tsParticles . domItem ( 0 ) ;
// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame
particles . play ( ) ;
// pause will stop the animations
particles . pause ( ) ; @tsparticles/angularここで入手可能な手順
astro-particlesここで入手可能な手順
ember-tsparticlesここで入手可能な手順
inferno-particlesここで入手可能な手順
jquery-particlesここで入手可能な手順
preact-particlesここで入手可能な手順
@tsparticles/reactここで入手可能な手順
riot-particlesここで指示を見つけることができます
solid-particlesここで指示を見つけることができます
@tsparticles/svelteここで入手可能な手順
@tsparticles/vue2ここで入手可能な手順
@tsparticles/vue3ここで利用できる指示
web-particlesここで指示を見つけることができます
@tsparticles/wordpresswordpress.orgでホストされているプラグインページはこちらにあります
実際、公式のTSPARTICLESプラグインは存在しませんが、 Premium Addons for Elementorとコラボレーションしています。
このリポジトリで使用する準備ができているプリセットがいくつかあり、実行に必要なすべてを含むバンドルファイルもあります。
このプリセットは、白い背景に上向きに動く大きな色の円を積み込みます。
ここで指示を見つけることができます
このプリセットは、白い背景に画面の下部から来る色付きの泡を負荷します。
ここで指示を見つけることができます
このプリセットは、透明な背景でスクリーンセンターから打ち上げられた白と赤の紙吹雪を積み込みます。
ここで指示を見つけることができます
このプリセットは、火と灰の火花のように色付けされた粒子で、色あせた赤を黒い背景にロードします。
ここで指示を見つけることができます
このプリセットは、リトルホタルのような小さなフェード粒子で作られたマウストレイルを積み込みます。
ここで指示を見つけることができます
このプリセットは、美しい花火効果をロードします。
ここで指示を見つけることができます
ここで指示を見つけることができます
ここで指示を見つけることができます
ここで指示を見つけることができます
ここで指示を見つけることができます
ここで指示を見つけることができます
ここで指示を見つけることができます
ここでは、いくつかのTSPARTICLES関連のテンプレートを見つけることができます。テンプレートは、 Vanilla JavaScript 、 ReactJS 、 Vuejs 、 Angular 、 Sveltejs 、およびその他のフレームワーク用に作成されています。
テンプレートはさまざまで、新しいものを作成したり、最新の機能で更新したり、より良いスタイルに変更したりできます。たまにチェックしてください。
TSPARTICLESでいくつかの優れたデザインを作成した場合、クールなテンプレートでプルリクエストをお気軽に送信してください。テンプレートの著者としてクレジットされます。
https://github.com/tsparticles/templates
https://particles.js.org/samples
すべてのビデオチュートリアルはWebサイトでhttps：//particles.js.org/video.htmlをご覧ください。
その他のビデオが間もなく登場します！いくつかの新しい内容があるかどうかを毎日確認してください。
particles.json
ここでいくつかの構成サンプルを見つけることができます
ここですべてのオプションを入手できます
CodepenでTSPARTICLESコレクションを作成しましたか？または、私のプロフィールをチェックすることができます
それ以外の場合は、以下にデモページリンクがあります。
さらに多くのデモを見たいですか？コンピューターのリポジトリをクローンして、これらの指示に従ってください
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm startブーム！ ？ http：// localhost：3000と他のデモを確認できます。
あなたが十分に勇敢であれば、開発中の機能を試すためにdev部門に切り替えることができます。
Tsparticlesには、このライブラリをParticles.js構成と100％互換性のあるものにするパッケージがあります。
真剣に、スクリプトをparticles.jsからバンドルされた互換性パッケージなどに変更する必要があります。
こちらをご覧ください
スイッチを実行する5つの理由を知りたいですか？ここを読んでください
以下に、Tsparticlesとその新しい構文をインストールするために必要なすべての情報を見つけることができます。
Tsparticlesはいくつかのカスタマイズをサポートするようになりました。
独自のプラグインを作成できます
こちらをご覧ください...
フローチャートTD
サブグラフコア[コア]
エンジン[Tsparticles Engine]
Perlin-Noise [Perlin NoiseLib]
simplex-noise [simplex nose lib]
構成[tsparticlics configs]
終わり
サブグラフバンドルベーシック[Tsparticles Basic]
サブグラフのベーシックモーバー[ムーバー]
移動ベース[ベース]
終わり
サブグラフの基本形状[形状]
形状[円]
終わり
サブグラフの基本アップデート[アップデーター]
アップデーターカラー[色]
Updater-Opacity [不透明]
Updater-Out-Modes [Out Modes]
Updater-Size [サイズ]
終わり
終わり
エンジン - > bundle-basic
サブグラフバンドルカンフェッティ[Tsparticles Sumpetti]
サブグラフ紙吹雪[プラグイン]
プラグインエミッター
プラグインモーション
終わり
サブグラフ紙吹雪[形]
形状カード
Shape-Emoji
シェイプハート
形状イメージ
シェイプポリゴン
形状二乗
シェイプスター
終わり
サブグラフ紙吹雪[updaters]
Updater-Life
Updater-Roll
Updater-rotate
アップデーターティルト
Updater-Wobble
終わり
終わり
Bundle-Basic-> BundleConfetti
サブグラフバンドルスリム[tsparticles slim]
サブグラフスリムインタラクション[相互作用]
サブグラフスリムインタラクション - 外部[外部]
interaction-exterternal-attract [引き付ける]
インタラクション - エクステルバウンス[バウンス]
インタラクション - エクステルバブル[バブル]
interaction-external-connect [connect]
interaction-external-grab [grab]
interaction-exterternal-ase [一時停止]
interaction-external-push [プッシュ]
インタラクション - エクステルルボーブ[削除]
interaction-External-Repulse [Repulse]
interaction-external-slow [slow]
終わり
サブグラフスリムインタラクション粒子[粒子]
相互作用粒子魅力[引き付ける]
相互作用粒子監視[衝突]
相互作用粒子リンク[リンク]
終わり
終わり
サブグラフスリムモーバー[引っ越し業者]
move-parallax [Parallax]
終わり
サブグラフスリムプルギン[プラグイン]
サブグラフスリムプルーギンの聴覚[緩和]
プラグインイージングクアッド[Quad]
終わり
終わり
サブグラフのスリムな形[形]
Shape-Emoji [絵文字]
シェイプイメージ[画像]
形状[線]
シェイプポリゴン[ポリゴン]
形状[正方形]
シェイプスター[星]
終わり
サブグラフスリムアップダーター[アップデーター]
Updater-Life [life]
Updater-rotate [回転]
アップデーターストロークカラー[ストロークカラー]
終わり
終わり
bundle-basic-> bundle-slim
サブグラフバンドルファイアワークス[Tsparticles Fireworks]
サブグラフ花火効果[効果]
エフェクトトレイル
終わり
サブグラフ花火プルギン[プラグイン]
プラグインエミッター
サブグラフ花火 - 模倣者の形[エミッターシェイプ]
プラグインエミッターシェイプスクエア
終わり
プラグインサウンド
終わり
サブグラフ花火 - 給料[Updaters]
Updater-Destroy
Updater-Life
Updater-rotate
終わり
終わり
Bundle-Basic-> Bundle-Fireworks
サブグラフバンドルフル[tsparticles]
サブグラフフルインタラクション[相互作用]
サブグラフ全操作 - 外部[外部]
interaction-External-Trail [トレイル]
終わり
終わり
サブグラフフルプルーギン[プラグイン]
プラグインアブソーバー[吸収剤]
プラグインエミッター[エミッター]
サブグラフフルプラギンエミッターの形[エミッターシェイプ]
プラグインエミッターシェイプセルコル[円]
プラグインエミッターシェイプスクエア[正方形]
終わり
終わり
サブグラフのフルシェイプ[形]
shape-text [テキスト]
終わり
サブグラフの全給油[アップデーター]
updater-destroy [破壊]
アップデーターロール[ロール]
Updater-Tilt [傾斜]
Updater-Winkle [Twinkle]
Updater-Wobble [Wobble]
終わり
終わり
bundle-slim-> bundle-full
サブグラフバンドル - すべて[すべて]
bundle-pjs [tsparticles particles.js互換性]
サブグラフのすべての効果[効果]
エフェクトバブル[バブル]
エフェクトトレイル[トレイル]
終わり
サブグラフのオールインタラクション[相互作用]
サブグラフオールインタラクション - 外部[外部]
インタラクション - エクタナル粒子[粒子]
interaction-external-pop [pop]
終わり
インタラクションライト[ライト]
サブグラフオールインタラクション粒子[粒子]
相互作用粒子反省[繰り返し]
終わり
終わり
サブグラフオールパス[パス]
path-curl-noise [カールノイズ]
パスカーブ[曲線]
Path-Perlin-Noise [Perlin Noise]
パスポリゴン[ポリゴン]
path-simplex-noise [シンプレックスノイズ]
Path-SVG [SVG]
終わり
サブグラフ全プルギン[プラグイン]
プラグインカンバスマスク[キャンバスマスク]
サブグラフ全プルーギンの逃亡者[緩和]
プラグインイーストバック[背面]
プラグインイーシングセルコ[circ]
プラグインイーシングキュービック[キュービック]
プラグインエッジエクスポ[expo]
プラグインイーシングリニア[線形]
プラグインイージングクアート[クォート]
プラグインイージングクイント[Quint]
プラグインイーシングサイン[sine]
終わり
サブグラフall-plugin-emitters shapes [エミッターシェイプ]
プラグインエミッターシェイプカンバス[キャンバス]
プラグインエミッターシェイプパス[パス]
プラグインエミッターシェイプポリゴン[ポリゴン]
終わり
サブグラフall-plugins-exports [エクスポート]
プラグイン-Export-Image [画像]
Plugin-Export-JSON [JSON]
Plugin-Export-Video [ビデオ]
終わり
Plugin-HSV-Color [HSVカラー]
プラグイン感染[感染]
プラグインモーション[モーション]
プラグインポイソンディスク[ポアソンディスク]
プラグインポリゴンマスク[ポリゴンマスク]
プラグインサウンド[サウンド]
終わり
サブグラフのすべての形[形]
Shape-Arrow [矢印]
シェイプカード[カード]
Shape-cog [cog]
シェイプハート[ハート]
シェイプパス[パス]
形状バウンドポリゴン[丸いポリゴン]
形状に丸みを帯びた[丸い長方]
形状[スパイラル]
終わり
サブグラフAll-Updaters [Updaters]
Updater-Gradient [勾配]
Updater-Orbit [Orbit]
終わり
Simplex-Noise-> path-curl-noise
perlin-noise-> path-perlin-noise
Simplex-Noise-> path-simplex-noise
終わり
bundle-full-> bundle-all
2020年から2022年のオープンソースライセンスのJetBrainsに感謝します！
JetBrains WebStormは、このプロジェクトを維持するために使用されます。
