tsparticles
tsParticles 3.0.2
ไลบรารี TypeScript น้ำหนักเบาสำหรับการสร้างอนุภาค การพึ่งพาฟรี (*), เบราว์เซอร์พร้อมและเข้ากันได้กับ React.js, vue.js (2.x และ 3.x), Angular, Svelte, jQuery, preact, Inferno, Riot.js, solid.js และส่วนประกอบของเว็บ
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpressเอกสารและการอ้างอิงการพัฒนาที่นี่
ห้องสมุดนี้มีอยู่ใน CDN ที่ได้รับความนิยมมากที่สุดสองรายการและง่ายและพร้อมใช้งานถ้าคุณใช้อนุภาค. js มันง่ายยิ่งขึ้น
คุณจะพบคำแนะนำด้านล่างพร้อมลิงก์ทั้งหมดที่คุณต้องการและ อย่ากลัวด้วย TypeScript มันเป็นเพียงภาษาต้นฉบับ
ไฟล์เอาต์พุตเป็นเพียง JavaScript -
CDNS และ npm มีแหล่งที่มาทั้งหมดที่คุณต้องการใน JavaScript , Bundle Browser Ready (tsparticles.engine.min.js) และไฟล์ทั้งหมดที่แยกออกมาสำหรับไวยากรณ์ import
หากคุณสนใจ มี คำแนะนำง่ายๆ ด้านล่างเพื่อแนะนำให้คุณย้ายจากไลบรารีอนุภาคเก่า js
โปรดใช้โฮสต์เหล่านี้หรือของคุณเองเพื่อโหลด tsparticles ในโครงการของคุณ
https://unpkg.com/@tsparticles/confetti/ https://unpkg.com/@tsparticles/Engine/ https://unpkg.com/@tsparticles/fireworks/ https://unpkg.com/@tsparticles/basic/mlticles https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/
Tsparticles Confetti
เครื่องยนต์ Tsparticles
ดอกไม้ไฟ Tsparticles
tsparticles พื้นฐาน
tsparticles ผอม
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/wordpressหน้าปลั๊กอินโฮสต์บน wordpress.org สามารถพบได้ที่นี่
ที่จริงแล้วปลั๊กอิน Tsparticles อย่างเป็นทางการไม่มีอยู่จริง แต่ฉันมีความร่วมมือกับ Premium Addons for Elementor
มีที่ตั้งล่วงหน้าบางส่วนพร้อมที่จะใช้ในที่เก็บนี้และพวกเขายังมีไฟล์ชุดที่มีทุกอย่างที่จำเป็นในการทำงาน
ที่ตั้งไว้ล่วงหน้านี้โหลดวงกลมสีขนาดใหญ่ขยับขึ้นไปบนพื้นหลังสีขาว
คุณสามารถค้นหาคำแนะนำได้ที่นี่
การตั้งค่าไว้ล่วงหน้านี้โหลดฟองสีที่มาจากด้านล่างของหน้าจอบนพื้นหลังสีขาว
คุณสามารถค้นหาคำแนะนำได้ที่นี่
ค่าที่ตั้งไว้ล่วงหน้านี้โหลดภาพนิ่งสีขาวและสีแดงเปิดตัวจากศูนย์หน้าจอบนพื้นหลังโปร่งใส
คุณสามารถค้นหาคำแนะนำได้ที่นี่
ค่าที่ตั้งไว้ล่วงหน้านี้โหลดสีแดงจางหายไปเป็นพื้นหลังสีดำที่มีอนุภาคสีเหมือนไฟและประกายไฟเถ้า
คุณสามารถค้นหาคำแนะนำได้ที่นี่
ที่ตั้งไว้ล่วงหน้านี้โหลดเส้นทางเมาส์ที่ทำจากอนุภาคเล็ก ๆ ที่ซีดจางเช่นหิ่งห้อยเล็ก ๆ น้อย ๆ
คุณสามารถค้นหาคำแนะนำได้ที่นี่
ที่ตั้งไว้ล่วงหน้านี้โหลดเอฟเฟกต์ดอกไม้ไฟที่สวยงาม
คุณสามารถค้นหาคำแนะนำได้ที่นี่
คุณสามารถค้นหาคำแนะนำได้ที่นี่
คุณสามารถค้นหาคำแนะนำได้ที่นี่
คุณสามารถค้นหาคำแนะนำได้ที่นี่
คุณสามารถค้นหาคำแนะนำได้ที่นี่
คุณสามารถค้นหาคำแนะนำได้ที่นี่
คุณสามารถค้นหาคำแนะนำได้ที่นี่
คุณสามารถค้นหาเทมเพลตที่เกี่ยวข้องกับ tsparticles ได้ที่นี่ เทมเพลตถูกสร้างขึ้นสำหรับ วานิลลาจาวาสคริปต์ , ReactJs , Vuejs , Angular , Sveltejs และเฟรมเวิร์กอื่น ๆ
เทมเพลตจะแตกต่างกันไปสามารถสร้างตัวใหม่หรืออัปเดตเก่าได้ด้วยคุณสมบัติล่าสุดหรือเปลี่ยนเป็นสไตล์ที่ดีกว่า ตรวจสอบพวกเขาเป็นครั้งคราว
หากคุณสร้างการออกแบบที่ดีด้วย tsparticles อย่าลังเลที่จะส่งคำขอดึงด้วยเทมเพลตสุดเท่ของคุณคุณจะได้รับเครดิตในฐานะผู้เขียนเทมเพลต!
https://github.com/tsparticles/templates
https://particles.js.org/samples
คุณสามารถค้นหาบทเรียนวิดีโอทั้งหมดได้ที่เว็บไซต์ได้ที่นี่: https://particles.js.org/video.html
วิดีโอเพิ่มเติมกำลังจะมาเร็ว ๆ นี้! ตรวจสอบทุกวันว่ามีเนื้อหาใหม่บ้างไหม
particles.json
คุณสามารถค้นหาตัวอย่างการกำหนดค่าได้ที่นี่
คุณสามารถค้นหาตัวเลือกทั้งหมดที่มีได้ที่นี่
ฉันได้สร้างคอลเลกชัน tsparticles บน codepen แล้วหรือยัง? หรือคุณสามารถตรวจสอบโปรไฟล์ของฉันได้
มิฉะนั้นจะมีลิงค์หน้าสาธิตด้านล่าง
ต้องการดูการสาธิตมากขึ้นหรือไม่? โคลนที่เก็บบนคอมพิวเตอร์ของคุณและทำตามคำแนะนำเหล่านี้
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm startบูม - http: // localhost: 3000 และคุณสามารถตรวจสอบการสาธิตอื่น ๆ
หากคุณกล้าพอ คุณสามารถเปลี่ยนไปใช้สาขา dev เพื่อลองใช้คุณสมบัติภายใต้การพัฒนา
Tsparticles มีแพ็คเกจที่ทำให้ไลบรารีนี้เข้ากันได้ 100% กับการกำหนดค่า particles.js
อย่างจริงจังคุณเพียงแค่ต้องเปลี่ยนสคริปต์จาก particles.js เป็นแพ็คเกจความเข้ากันได้ที่รวมกัน et-Voilà คุณพร้อม หรือยัง!
คุณสามารถอ่านเพิ่มเติมได้ ที่นี่
ต้องการทราบเหตุผล 5 ประการในการสวิตช์หรือไม่? อ่านที่นี่
ด้านล่างคุณสามารถค้นหาข้อมูลทั้งหมดที่คุณต้องการในการติดตั้ง tsparticles และไวยากรณ์ใหม่
ตอนนี้ Tsparticles รองรับการปรับแต่งบางอย่าง?
คุณสามารถสร้างปลั๊กอินของคุณเอง
อ่านเพิ่มเติมที่นี่ ...
ผังงาน TD
subgraph core [core]
เครื่องยนต์ [Tsparticles Engine]
Perlin-noise [Perlin Noise Lib]
simplex-noise [simplex noise lib]
กำหนดค่า [tsparticles configs]
จบ
Subgraph Bundle-Basic [Tsparticles Basic]
Subgraph MOBOVER BASIC [MOVERS]
ย้ายฐาน [ฐาน]
จบ
subgraph รูปร่างพื้นฐาน [รูปร่าง]
วงกลมรูปร่าง [วงกลม]
จบ
Subgraph Basical-updates [updaters]
updater-color [สี]
Updater-Opacity [Opacity]
Updater-out-modes [โหมดออก]
อัพเดทขนาด [ขนาด]
จบ
จบ
เครื่องยนต์-> Bundle-Basic
Subgraph Bundle-Confetti [Tsparticles Confetti]
Subgraph Confetti-plugins [ปลั๊กอิน]
ปลั๊กอิน
ปลั๊กอิน
จบ
Subgraph Confetti Shapes [รูปร่าง]
การ์ดรูปร่าง
รูปปั้น
หัวใจ
รูปทรง
รูปทรงโพลิกอน
รูปทรงสแควร์
ดาว
จบ
Subgraph Confetti-updaters [updaters]
ชีวิตผู้อัปเดต
อัพเดทมดลูก
อัพเดทโรตต
การปรับความเอียง
อัพเดท-อัพเดท
จบ
จบ
Bundle-Basic-> Bundle-Confetti
Subgraph Bundle-Slim [Tsparticles Slim]
subgraph slim-interactions [การโต้ตอบ]
subgraph slim-interactions-external [ภายนอก]
ปฏิสัมพันธ์ระหว่างภายนอก-attract [ดึงดูด]
ปฏิสัมพันธ์ระหว่างภายนอก [ตีกลับ]
ปฏิสัมพันธ์-ฟองสบู่ [ฟอง]
ปฏิสัมพันธ์ระหว่างภายนอกเชื่อมต่อ [เชื่อมต่อ]
ปฏิสัมพันธ์-ภายนอก-คว้า [คว้า]
ปฏิสัมพันธ์ระหว่างภายนอก [หยุดชั่วคราว]
การโต้ตอบ-ขับไล่ [push]
การโต้ตอบ-ภายนอกรูปแบบ [ลบ]
ปฏิสัมพันธ์ระหว่างภายนอก [Repulse]
ปฏิสัมพันธ์-เลื่อนออกไป [ช้า]
จบ
subgraph slim-interactions-particles [อนุภาค]
อนุภาคปฏิสัมพันธ์-attract [ดึงดูด]
ปฏิสัมพันธ์กับอนุภาคส่วนกลาง [Collisions]
การโต้ตอบอนุภาค-ลิงก์ [ลิงก์]
จบ
จบ
Subgraph Slim-MoD [Movers]
Move-Parallax [Parallax]
จบ
Subgraph Slim-Plugins [ปลั๊กอิน]
Subgraph Slim-Plugins-esing [Easings]
ปลั๊กอิน osed-quad [quad]
จบ
จบ
Subgraph Slim Shapes [รูปร่าง]
Shape-Emoji [Emoji]
รูปถ่ายรูปร่าง [ภาพ]
เส้นรูปร่าง [บรรทัด]
Phape-Polygon [Polygon]
รูปทรงสแควร์ [สแควร์]
Star-Star [Star]
จบ
Subgraph Slim-updaters [updaters]
Updater-Life [ชีวิต]
Updater-Rotate [หมุน]
Updater-Stroke-Color [Stroke Color]
จบ
จบ
Bundle-Basic-> Bundle-Slim
Subgraph Bundle-Fireworks [Tsparticles Fireworks]
เอฟเฟกต์ดอกไม้ไฟย่อย [เอฟเฟกต์]
ร่องรอย
จบ
Subgraph Fireworks-Plugins [ปลั๊กอิน]
ปลั๊กอิน
Subgraph Fireworks-Plugin-Emitters-Shapes [emitters shapes]
ปลั๊กอิน-รูปทรงสแควร์สแควร์
จบ
ปลั๊กอิน
จบ
Subgraph Fireworks-updaters [updaters]
ผู้อัปเดต
ชีวิตผู้อัปเดต
อัพเดทโรตต
จบ
จบ
Bundle-Basic-> Bundle-Fireworks
Subgraph Bundle-full [tsparticles]
การโต้ตอบแบบเต็มกราฟ [การโต้ตอบ]
subgraph การโต้ตอบเต็ม-ภายนอก [ภายนอก]
ปฏิสัมพันธ์ระหว่างภายนอก-เส้นทาง [TRAIL]
จบ
จบ
Subgraph Full-Plugins [ปลั๊กอิน]
ปลั๊กอิน-ดูดซับ [ตัวดูดซับ]
ปลั๊กอิน-emitters [emitters]
Subgraph Full-Plugin-Emitters-Shapes [Emitters Shapes]
ปลั๊กอิน-รูปทรง-วงกลม [วงกลม]
ปลั๊กอิน-รูปทรงสแควร์สแควร์ [สแควร์]
จบ
จบ
Subgraph Full Shapes [รูปร่าง]
ข้อความรูปร่าง [ข้อความ]
จบ
Subgraph Full-updaters [updaters]
updater-destroy [ทำลาย]
Updater-Roll [Roll]
Updater-Tilt [Tilt]
Updater-Twinkle [Twinkle]
Updater-Wobble [Wobble]
จบ
จบ
Bundle-Slim-> Bundle-Full
Subgraph Bundle-all [tsparticles ทั้งหมด]
BUNDLE-PJS [TSPARTICLES PARTICLES.JS ความเข้ากันได้]
Subgraph All-Effects [เอฟเฟกต์]
ฟองผลกระทบ [ฟอง]
Effect-Trail [Trail]
จบ
subgraph All-interactions [การโต้ตอบ]
Subgraph All-Interactions-external [ภายนอก]
อนุภาคปฏิสัมพันธ์-ภายนอก [อนุภาค]
ปฏิสัมพันธ์-ภายนอกป๊อป [ป๊อป]
จบ
การโต้ตอบ-แสง [เบา]
Subgraph All-interactions-particles [อนุภาค]
การโต้ตอบอนุภาค-Repulse [Repulse]
จบ
จบ
Subgraph All-Paths [Paths]
Path-Curl-noise [Curl Noise]
เส้นโค้งเส้นทาง [เส้นโค้ง]
Path-Perlin-noise [Noise Perlin]
Path-Polygon [Polygon]
Path-simplex-noise [simplex noise]
Path-SVG [SVG]
จบ
Subgraph All-Plugins [ปลั๊กอิน]
ปลั๊กอิน-แคนวาส-มาสก์ [Canvas Mask]
Subgraph All-Plugins-esing [Easings]
ปลั๊กอินที่เปิดอยู่ด้านหลัง [กลับ]
ปลั๊กอิน-เปิด-วงกลม [circ]
ปลั๊กอิน-คิวบิก [ลูกบาศก์]
ปลั๊กอิน-เอ็กซ์โป [Expo]
ปลั๊กอิน-ไลน์เชิงเส้น [เชิงเส้น]
ปลั๊กอิน-ควอร์ต [ควอร์ต]
ปลั๊กอิน osed-quint [quint]
ปลั๊กอิน-อีสซีน [ไซน์]
จบ
subgraph all-plugin-emitters-shapes [emitters shapes]
ปลั๊กอิน-อีเมตเตอร์-แคนวาส [Canvas]
Plugin-Emitters-shape-path [เส้นทาง]
ปลั๊กอิน-อีเมตเตอร์-โพลิกอน [รูปหลายเหลี่ยม]
จบ
Subgraph All-Plugins-Exports [Exports]
ปลั๊กอิน-ออกภาพ [ภาพ]
ปลั๊กอิน-ออก json [JSON]
ปลั๊กอิน-ส่งผ่านวิดีโอ [วิดีโอ]
จบ
Plugin-HSV-Color [HSV Color]
การติดเชื้อปลั๊กอิน [การติดเชื้อ]
ปลั๊กอินโมชั่น [การเคลื่อนไหว]
Plugin-Poisson-Disc [Poisson Disc]
ปลั๊กอิน-โพลิกอน-หน้ากาก [รูปหลายเหลี่ยม]
ปลั๊กอิน-เสียง [เสียง]
จบ
Subgraph ทุกรูปร่าง [รูปร่าง]
ลูกศรรูปร่าง [ลูกศร]
การ์ดรูปร่าง [การ์ด]
รูปทรง COG [COG]
รูปร่างหัวใจ [หัวใจ]
รูปทรงรูปร่าง [เส้นทาง]
รูปทรงกลม-โพลีกอน [รูปหลายเหลี่ยมโค้งมน]
รูปทรงกลมที่โค้งมน [rected rect]
รูปร่าง-เกลียว [เกลียว]
จบ
Subgraph All-updaters [updaters]
updater-gradient [GRADIET
Updater-Orbit [Orbit]
จบ
simplex-noise-> path-curl-noise
Perlin-noise-> Path-Perlin-noise
simplex-noise-> path-simplex-noise
จบ
Bundle-Full-> Bundle-all
ขอขอบคุณ Jetbrains สำหรับใบอนุญาตโอเพ่นซอร์ส 2020-2565!
Jetbrains Webstorm ใช้เพื่อรักษาโครงการนี้
