tsparticles
tsParticles 3.0.2
مكتبة TypeScript خفيفة الوزن لإنشاء الجسيمات. التبعية خالية (*) ، مستعرض جاهز ومتوافق مع React.js ، vue.js (2.x و 3.x) ، Angular ، svelte ، jquery ، prect ، inferno ، riot.js ، solid.js ، و Web Components
@tsparticles/angularastro-particlesember-tsparticlesinferno-particlesjquery-particlespreact-particles@tsparticles/reactriot-particlessolid-particles@tsparticles/svelte@tsparticles/vue2@tsparticles/vue3web-particles@tsparticles/wordpressمراجع التوثيق والتطوير هنا
تتوفر هذه المكتبة على اثنين من أكثر CDNs شعبية وهي سهلة وجاهزة للاستخدام ، إذا كنت تستخدم الجسيمات.
ستجد الإرشادات أدناه ، مع جميع الروابط التي تحتاجها ، ولا تخاف من TypeScript ، إنها مجرد لغة المصدر .
ملفات الإخراج هي مجرد JavaScript . ؟
يحتوي CDNS و npm على جميع المصادر التي تحتاجها في JavaScript ، ومستعرض حزمة جاهز (tsparticles.engine.min.js) ، وجميع الملفات المقسمة import بناء جملة.
إذا كنت مهتمًا ، فهناك بعض الإرشادات البسيطة أدناه لتوجيهك للترحيل من مكتبة الجسيمات القديمة.
يرجى استخدام هذه المضيفين أو خاصة بك لتحميل الجسيمات tsparts على مشاريعك
https://unpkg.com/@tsparticles/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https://unpkg.com/@tsparticles/basic/ https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/
جسيمات Tsparticles
Tsparticles Engine
ألعاب نارية الجسيمات
Tsparticles Basic
Tsparticles Slim
الجسيمات
الجسيمات TSPARTING جميع
npm install @tsparticles/engineyarn add @tsparticles/enginepnpm install @tsparticles/engine const tsParticles = require ( "@tsparticles/engine" ) ;
// or
import { tsParticles } from "@tsparticles/engine" ; tsParticles المستوردة هي نفس المثيل الذي لديك عند تضمين البرنامج النصي في الصفحة باستخدام علامة <script> .
قم بتحميل الجسيمات Tspartics وتكوين الجسيمات:
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 Plugin.
هناك بعض الإعدادات المسبقة جاهزة للاستخدام في هذا المستودع ، ولديها أيضًا ملف حزمة يحتوي على كل ما يحتاج إلى تشغيله.
هذا محمل مسبقًا يحمل الدوائر الملونة الكبيرة تتحرك لأعلى على خلفية بيضاء.
يمكنك العثور على التعليمات هنا
هذا التحميل المسبق يحمل الفقاعات الملونة القادمة من أسفل الشاشة على خلفية بيضاء.
يمكنك العثور على التعليمات هنا
يتم تشغيل هذا التحول المسبق المسبق من حلويات الشاشة التي تم إطلاقها من مركز الشاشة على خلفية شفافة.
يمكنك العثور على التعليمات هنا
هذا الإعداد المسبق يحمل اللون الأحمر الباهت على خلفية سوداء مع جزيئات ملونة مثل النار وشرات الرماد.
يمكنك العثور على التعليمات هنا
هذا مسبقًا يحمل مسارًا ماوس مصنوع من جزيئات صغيرة تتلاشى مثل اليراعات الصغيرة.
يمكنك العثور على التعليمات هنا
هذا الإعداد المسبق يحمل تأثير الألعاب النارية الجميلة.
يمكنك العثور على التعليمات هنا
يمكنك العثور على التعليمات هنا
يمكنك العثور على التعليمات هنا
يمكنك العثور على التعليمات هنا
يمكنك العثور على التعليمات هنا
يمكنك العثور على التعليمات هنا
يمكنك العثور على التعليمات هنا
يمكنك العثور على بعض القوالب ذات الصلة الجسيمات هنا. يتم إنشاء القوالب لفانيليا جافا سكريبت ، reactjs ، vuejs ، الزاوي ، sveltejs ، وغيرها من الأطر.
ستختلف القوالب ، يمكن إنشاء قوالب جديدة أو تحديثها لأحدث الميزات أو تم تغييرها إلى نمط أفضل. تحقق منها من حين لآخر.
إذا قمت بإنشاء بعض التصميم الجيد مع Tsparticles فلا تتردد في تقديم طلب سحب باستخدام قالب رائع ، فسوف يتم الفضل في ذلك كمؤلف القالب!
https://github.com/tsparticles/templates
https://particles.js.org/samples
يمكنك العثور على جميع دروس الفيديو على الموقع هنا: https://particles.js.org/video.html
المزيد من مقاطع الفيديو ستأتي قريبًا! تحقق كل يوم إذا كان هناك بعض المحتويات الجديدة.
الجسيمات
يمكنك العثور على بعض عينات التكوين هنا
يمكنك العثور على جميع الخيارات المتاحة هنا
لقد قمت بإنشاء مجموعة الجسيمات على codepen؟ أو يمكنك التحقق من ملف التعريف الخاص بي
خلاف ذلك ، هناك رابط الصفحة التجريبية أدناه.
تريد أن ترى المزيد من العروض التوضيحية؟ استنساخ المستودع على جهاز الكمبيوتر الخاص بك واتبع هذه التعليمات
$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm startبوم! ؟ http: // localhost: 3000 ويمكنك التحقق من العروض التوضيحية الأخرى.
إذا كنت شجاعًا بما يكفي ، فيمكنك التبديل إلى فرع dev لتجربة الميزات قيد التطوير.
تحتوي Tsparticles على حزمة تجعل هذه المكتبة متوافقة بنسبة 100 ٪ مع تكوين الجسيمات .
على محمل الجد ، تحتاج فقط إلى تغيير البرنامج النصي من الجسيمات. js إلى حزمة التوافق المجمعة ، et-voilà ، أنت جاهز ؟!
يمكنك قراءة المزيد هنا
هل تريد معرفة 5 أسباب للقيام بالمفتاح؟ اقرأ هنا
يمكنك العثور أدناه على جميع المعلومات التي تحتاجها لتثبيت الجسيمات Tsparticles وبناء الجملة الجديدة.
Tsparticles تدعم الآن بعض التخصيصات؟
يمكنك إنشاء الإضافات الخاصة بك
اقرأ المزيد هنا ...
مخطط انسيابي TD
Core Subgraph [Core]
المحرك [Tsparticles Engine]
Perlin Noise [Perlin Noise lib]
Simplex-Noise [Simplex Noise lib]
تكوينات [Tsparticles Configs]
نهاية
حزمة باقة subgraph [Tsparticles Basic]
محرك الفرع الأساسيين [المحركون]
قاعدة الحركة [قاعدة]
نهاية
الفرق الأساسية الفرعية [الأشكال]
دائرة الشكل [دائرة]
نهاية
المنتالون الأساسيون الفرعيون [updaters]
لون محدث [اللون]
طاقة التحديث [العتامة]
أوضاع التحديثات [أوضاع خارج]
حجم التحديث [الحجم]
نهاية
نهاية
المحرك-> حزمة باسيك
حزمة الحزمة الفرعية [Confetti tsparticles]
حلويات الفرع الفرعي plugins [الإضافات]
المنبعثين من البرنامج المساعد
حركة البرنامج المساعد
نهاية
حلويات الفرع [أشكال]
بطاقات الشكل
شكل emoji
شكل قلب
صورة الشكل
شكل البوليجون
مربع الشكل
نجم الشكل
نهاية
حلويات subgraph [updaters]
الحياة المحدثة
updater-roll
ROTATE محدث
تحديث الإمالة
updater-wobble
نهاية
نهاية
Bundle-Basic-> backdle-confetti
حزمة الحزمة الفرعية [Tsparticles Slim]
التفاعلات النحيفة الفرعية [التفاعلات]
الفهود النحيف الفرعي-الخارجيات [الخارجية]
التفاعل والاختصار-الجذب [جذب]
الارتداد التفاعلي والخارجي [ترتد]
التفاعل-الخلاف الخارجي [فقاعة]
توصيل التفاعل-الخارجي [الاتصال]
التفاعل والاختصار [الاستيلاء]
التفاعل والاختصار الخارجي [وقفة]
التفاعل-الخارجي [دفع]
التفاعل والاخماء الخارجي [إزالة]
التفاعل والاختتام الخارجي [الصيد]
التفاعل والفاعل بطيء [بطيء]
نهاية
الجسيمات الفرعية الدافعة النحيفة [الجسيمات]
الجسيمات التفاعلية-الجسيمات [جذب]
جسيمات التفاعل [الاصطدام]
روابط الجسيمات التفاعلية [روابط]
نهاية
نهاية
محركون ضئيلون [المحركون]
Move-Parallax [parallax]
نهاية
subgraph slim-plugins [الإضافات]
الفرع النحيف-الألواح النحيفة [EASINGS]
Quad-Quad بالمكونات الإضافية [Quad]
نهاية
نهاية
الفرق النحيفة الفرعية [الأشكال]
شكل emoji [الرموز التعبيرية]
صورة الشكل [صورة]
خط الشكل [الخط]
شكل الشكل [مضلع]
مربع الشكل [مربع]
نجم الشكل [نجمة]
نهاية
Subgraph Slimdaters [updaters]
حياة التحديث [الحياة]
ROTATE التحديث [تدوير]
بلون محديثات السكتة الدماغية [لون السكتة الدماغية]
نهاية
نهاية
باقة باسك-> حزمة سليم
أحذية الحزمة الفرعية [Tsparticles Fireworks]
آثار الألعاب النارية الفرعية [الآثار]
تأثير المسبحة
نهاية
ألعاب نارية فرعية [plugins] [الإضافات]
المنبعثين من البرنامج المساعد
ألعاب نارية فرعية-ألواح البلاغين [أشكال البندقية]
مكون من الملابس الإضافية مربع
نهاية
أصوات البرنامج المساعد
نهاية
ألعاب نارية فرعية [updaters]
updater-destroy
الحياة المحدثة
ROTATE محدث
نهاية
نهاية
حزمة باسك-> حزمة
حزمة الرسم البياني-ممتلئ [Tsparticles]
التفاعلات الكاملة الفرعية [التفاعلات]
الفاصل الفرعي الكامل-الخارجي [Externals]
التفاعل والطرف الخارجي [درب]
نهاية
نهاية
plugins الفرعية الكاملة [الإضافات]
المكوّن الإضافي [الامتصاص]
المنبعثين من المكونات الإضافية [بواعث]
تشكيلات فرعية كاملة من الألغاز [أشكال البوابات]
دائرة الشكل المكونات الإضافية [دائرة]
مكون من الملابس الإضافية مربع [مربع]
نهاية
نهاية
الأشكال الفرعية الكاملة [الأشكال]
نص الشكل [نص]
نهاية
المتقدمون الفرعيون الكاملون [التحديثات]
Updater-Destroy [تدمير]
updater-roll [Roll]
طول التحديث [الميل]
updater-twinkle [twinkle]
updater-wobble [تمايل]
نهاية
نهاية
حزمة slim-> حزمة full
حزمة Subgraph-All [Tsparticles All]
حزمة pjs [توافق الجسيمات tsparticles.js] التوافق]
الآثار الفرعية لجميع الآثار [الآثار]
تأثير التأثير [فقاعة]
تأثير المقطورة [درب]
نهاية
التفاعلات الفرعية للجميع [التفاعلات]
الفرع الفرعي الكلفيات-خارجي [خارجي]
الجسيمات الخارجي للتفاعل [الجسيمات]
التفاعل-البوب الخارجي [POP]
نهاية
ضوء التفاعل [الضوء]
الجسيمات الفرعية للجميع [الجسيمات]
جسيمات التفاعل [الصيد]
نهاية
نهاية
Subgraph All-Paths [مسارات]
Path-Curl-Noise [ضوضاء حليقة]
منحنيات المسار [المنحنيات]
Path-Perlin-Noise [Perlin Noise]
PATH-POLYGON [POLYGON]
مسار Simplex-Noise [ضوضاء Simplex]
PATH-SVG [SVG]
نهاية
subgraph All-Plugins [Plugins]
قناع المكون الإضافي-canvas [قناع القماش]
الفرع الفرعي All-Plugins-feasings [Easings]
الظهر المكون الإضافي [مرة أخرى]
دائرة مكون من المساعد الإضافية [CIRC]
المكوّن الإضافي-cubic [مكعب]
expo-expo المكون الإضافي [Expo]
الخطية المكوّن الإضافي [خطي]
QUART-QUART بالمكونات الإضافية [QUART]
Quint-Quint-Quint [Quint]
مكون الإضافي---سيرين [جيب]
نهاية
تشكيلات فرعية من كل البلاغين [أشكال البوابات]
canvas الملوثة الإضافية [Canvas]
مسار الشكل المكون من الملابس الإضافية [المسار]
Plugin-exitters-polygon [Polygon]
نهاية
تصديرات Subgraph All-Plugins [الصادرات]
التصدير المكون الإضافي [صورة]
البرنامج المساعد-Export-Json [JSON]
البرنامج المساعد-التصدير [فيديو]
نهاية
Plugin-HSV-Color [HSV Color]
المكوّن الإضافي [العدوى]
حركة البرنامج المساعد [الحركة]
المكون الإضافي-بويسون-دبوس [قرص Poisson]
قناع Plugin-Polygon [قناع Polygon]
أصوات البرنامج المساعد [الأصوات]
نهاية
الفرق الفرعية جميع الأشكال [الأشكال]
سهم الشكل [السهم]
بطاقات الشكل [البطاقات]
شكل شكل [COG]
شكل قلب [القلب]
مسار الشكل [المسار]
polygon ذات الشكل [polygon مستدير]
ركيزة الشكل [مستقيم مستدير]
شكل الشكل [حلزوني]
نهاية
Subgraph All-Updaters [updaters]
تحديث التحديث [التدرج]
updater-pbit [مدار]
نهاية
Simplex-Noise-> Path-Curl-Noise
Perlin-Noise-> Path-Perlin-Noise
Simplex-Noise-> Path-Simplex-Noise
نهاية
حزمة-full-> حزمة الكل
شكر كبير ل Jetbrains لتراخيص المصدر مفتوحة 2020-2022!
يتم استخدام jetbrains webstorm للحفاظ على هذا المشروع.
