هل يعمل ملف JSON المصدَّر في أي إطار أمامي؟

نعم. الإعدادات متوافقة مع tsParticles، الذي يوفّر روابط رسمية لـ React وVue وSvelte وAngular وJS عادي. ركّب الـ wrapper المناسب ومرّر الـ JSON بوصفه options فيظهر التأثير مطابقاً للمعاينة هنا.

كم عدد الجسيمات الذي يبدأ معه التأخير؟

في حاسوب محمول حديث، 200 إلى 400 جسيم تعمل بسلاسة عند 60 إطاراً في الثانية. بعد 500 يظهر تقطّع على هواتف الفئة المتوسطة. النجوم والمضلّعات أثقل من الدوائر. للجوال ابقَ قرب 100 إلى 150 مع تقليل التفاعل.

لماذا يبدو التأثير مختلفاً بعد تصدير HTML؟

مقطع HTML يمدّ اللوحة لحجم العنصر الأب. إذا لصقته داخل div صغير ستزدحم الجسيمات. أعطِ الحاوية ارتفاعاً ثابتاً (مثلاً 100vh أو 400px) فتتمدّد اللوحة معها.

هل يمكن استخدام صورة مخصّصة كشكل للجسيم؟

ليس من الواجهة، لكن المحرك يدعم ذلك. صدّر JSON ثم عدّل shape.options.image ليشير إلى صورتك PNG أو SVG. تُعرض الصورة بالحجم والشفافية اللذين تخصّصهما المحاكاة لكل جسيم.

هل يؤثّر التأثير على مؤشرات أداء الصفحة؟

يضيف نحو 30 إلى 80 كيلوبايت مضغوطة لتحميل المحرك، فضلاً عن إعادة رسم اللوحة باستمرار. لتحسين Lighthouse، قلّل عدد الجسيمات وأطفئ التفاعل على الجوال. تحميل المحرك بكسل بعد ظهور الـ hero يحافظ على مقياس LCP نظيفاً.

مولّد تأثيرات الجسيمات

أنشئ رسومات متحركة قابلة للتخصيص بالجسيمات

معاينة

الخلفية

جارٍ التحميل...

إعداد مسبق

الإعدادات

عدد الجسيمات120

السرعة (الحد الأدنى)0.5

السرعة (الحد الأقصى)2

نطاق الحجم (الحد الأدنى)1

نطاق الحجم (الحد الأقصى)5

الشفافية0.9

حركة التلاشي

الشكل

ألوان

حركة الألوان

الجاذبية0

الرياح0.3

الارتداد

التفاعل

تمرير

نقر

تصدير

{
  "fullScreen": {
    "enable": false
  },
  "background": {
    "color": {
      "value": "#1e293b"
    }
  },
  "particles": {
    "number": {
      "value": 120,
      "density": {
        "enable": true
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle"
    },
    "opacity": {
      "value": {
        "min": 0.4,
        "max": 0.9
      }
    },
    "size": {
      "value": {
        "min": 1,
        "max": 5
      }
    },
    "move": {
      "enable": true,
      "speed": {
        "min": 0.5,
        "max": 2
      },
      "direction": "bottom",
      "straight": false,
      "outModes": {
        "default": "out"
      },
      "drift": 0.3
    },
    "wobble": {
      "enable": true,
      "distance": 10,
      "speed": 5
    }
  },
  "interactivity": {
    "events": {
      "onHover": {
        "enable": true,
        "mode": "repulse"
      }
    },
    "modes": {
      "repulse": {
        "distance": 80,
        "duration": 0.4
      }
    }
  }
}

ما هو مولّد تأثيرات الجسيمات؟

صمّم واستعرض تأثيرات جسيمات متحركة لموقعك الإلكتروني أو تطبيقك. اضبط عدد الجسيمات وسرعتها وحجمها ولونها وشكلها وسلوك التفاعل والفيزياء لإنشاء تأثيرات كالثلج والقصاصات الورقية واليراعات وأنماط المجرات. صدّر الإعدادات ككود جاهز للاستخدام.

محرك العمل هو tsParticles، لذا الـ JSON الذي تنسخه يمكن وضعه مباشرة في مشروع React أو Vue أو JavaScript عادي. تفاعلات الفأرة عند التمرير والنقر (تنافر، إمساك، فقاعة، دفع، إزالة) وتلاشي الشفافية وحركة الألوان (تدرّج اللون) كلها تعمل من الصندوق، وتصدير HTML يضمّن المحرك عبر CDN ليُلصق في صفحة ثابتة بدون أي خطوة بناء. ويمكنك أيضاً تسجيل المعاينة المباشرة كملف GIF متحرك لمشاركة التأثير في أي مكان.

كيفية الاستخدام

اختر تأثيراً مُعداً مسبقاً (ثلج، قصاصات ورقية، يراعات، فقاعات، مجرة، شبكة، ألعاب نارية، نار، دخان) أو ابدأ من الصفر.
اضبط خصائص الجسيمات: العدد، السرعة، نطاق الحجم، الألوان، الأشكال، الشفافية، والفيزياء كالجاذبية والارتداد.
استعرض الرسوم المتحركة مباشرة، ثم انسخ إعدادات JSON لمكتبة tsParticles أو صدّرها كمقطع HTML مستقل أو سجّل المعاينة كملف GIF متحرك.

متى تستخدم

إضافة طبقة ثلج أو قصاصات ورق لصفحة هبوط موسمية أو إطلاق منتج.
بناء خلفية تجريبية لقسم الـ hero في موقع SaaS قبل تكليف المصمم.
صناعة خلفية مجرّة أو يراعات لصفحة معرض أعمال أو قائمة لعبة.

النتيجة

يختار مطوّر ويب الإعداد المسبق للثلج ويزيد عدد الجسيمات إلى 200 ويضيف انحرافاً خفيفاً بفعل الرياح، ثم ينسخ إعدادات JSON لإضافة تأثير شتوي على صفحة الهبوط الخاصة بالأعياد.

الأسئلة الشائعة

هل يعمل ملف JSON المصدَّر في أي إطار أمامي؟: نعم. الإعدادات متوافقة مع tsParticles، الذي يوفّر روابط رسمية لـ React وVue وSvelte وAngular وJS عادي. ركّب الـ wrapper المناسب ومرّر الـ JSON بوصفه options فيظهر التأثير مطابقاً للمعاينة هنا.
كم عدد الجسيمات الذي يبدأ معه التأخير؟: في حاسوب محمول حديث، 200 إلى 400 جسيم تعمل بسلاسة عند 60 إطاراً في الثانية. بعد 500 يظهر تقطّع على هواتف الفئة المتوسطة. النجوم والمضلّعات أثقل من الدوائر. للجوال ابقَ قرب 100 إلى 150 مع تقليل التفاعل.
لماذا يبدو التأثير مختلفاً بعد تصدير HTML؟: مقطع HTML يمدّ اللوحة لحجم العنصر الأب. إذا لصقته داخل div صغير ستزدحم الجسيمات. أعطِ الحاوية ارتفاعاً ثابتاً (مثلاً 100vh أو 400px) فتتمدّد اللوحة معها.
هل يمكن استخدام صورة مخصّصة كشكل للجسيم؟: ليس من الواجهة، لكن المحرك يدعم ذلك. صدّر JSON ثم عدّل shape.options.image ليشير إلى صورتك PNG أو SVG. تُعرض الصورة بالحجم والشفافية اللذين تخصّصهما المحاكاة لكل جسيم.
هل يؤثّر التأثير على مؤشرات أداء الصفحة؟: يضيف نحو 30 إلى 80 كيلوبايت مضغوطة لتحميل المحرك، فضلاً عن إعادة رسم اللوحة باستمرار. لتحسين Lighthouse، قلّل عدد الجسيمات وأطفئ التفاعل على الجوال. تحميل المحرك بكسل بعد ظهور الـ hero يحافظ على مقياس LCP نظيفاً.

مولّد تأثيرات الجسيمات

ما هو مولّد تأثيرات الجسيمات؟

كيفية الاستخدام

متى تستخدم

النتيجة

الأسئلة الشائعة

أدوات ذات صلة

مولّد النسيج

أداة إنشاء الهيكل التنظيمي

مولّد حركات CSS

صانع صور مصغّرة لليوتيوب

مولّد سحابة الكلمات

صانع الجداول الزمنية

مولّد تأثيرات الجسيمات