2
الصفحة الرئيسية
اضافات بلوجر

كيفية إنشاء تأثيرات الجسيمات المتحركة باستخدام مكتبة الجسيمات.js

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

 مرحبا بكم يا اصدقائي اليوم سوف نشرح لكم كيفية تركيب جسيمات باستخدام الجسيمات.js هي مكتبة جافا سكريبت خفيفة الوزن وسهلة الاستخدام تتيح لك إنشاء تأثيرات جسيمات متحركة مثيرة للإعجاب على موقع الويب الخاص بك. باستخدام الجسيمات.js ، يمكنك بسهولة إضافة تأثيرات إلى موقع الويب الخاص بك مثل الشهب أو تساقط الثلوج أو أي تأثير آخر يعتمد على الجسيمات يمكنك تخيله. وهذا لا يزيد من جماليات الموقع فحسب، بل يخلق أيضًا تجربة تصفح فريدة وممتعة للمستخدمين.

كيفية إنشاء تأثيرات الجسيمات المتحركة باستخدام مكتبة الجسيمات.js
كيفية إنشاء تأثيرات الجسيمات المتحركة باستخدام مكتبة الجسيمات.js

تخصيص تأثيرات الجسيمات

يوفر لك الجسيمات.js مجموعة من الخيارات لتخصيص تأثيرات الجسيمات لتناسب تصميم الويب الخاص بك بشكل أفضل. يمكنك ضبط عدد الجسيمات واللون والشفافية وسرعة الحركة والعديد من الخصائص الأخرى من خلال ملف التكوين JSON. تعني هذه المرونة أنه يمكنك إنشاء تأثيرات فريدة وشخصية كما يحلو لك.

دمج التأثيرات في الموقع

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

تعليمات لإنشاء تأثيرات الجسيمات المتحركة

الخطوة الأولى: قم بتسجيل الدخول إلى صفحة إدارة بلوجر.

الخطوة 2: انقر فوق الموضوع → تحرير HTML

الخطوة 3: انسخ المكتبة الجسيمات.js والصقه على البطاقة<head> .
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'/>

الخطوة 4: استمر في نسخ ملف CSS أدناه والصقه في البطاقة ]]></b:skin> .
#particles-js {position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;background-color: var(--lightBg);}

ملاحظة: استبدل المكان var(--lightBg)بلون الخلفية المفضل لديك.

مقالات ذات صلة

الخطوة 5: ثم انسخ ملف JS أدناه والصقه في البطاقة </body> .
<div id='particles-js'/>
<script>
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 88,
      "density": {
        "enable": true,
        "value_area": 700
      }
    },
    "color": {
      "value": ["#004DFF", "#D80032", "#FFAA00", "#00FF00"]
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#ffffff"
      },
      "polygon": {
        "nb_sides": 15
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1.5,
        "opacity_min": 0.15,
        "sync": false
      }
    },
    "size": {
      "value": 2.5,
      "random": false,
      "anim": {
        "enable": true,
        "speed": 2,
        "size_min": 0.15,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 110,
      "color": "#00BFFF",
      "opacity": 0.4,
      "width": 1.25
    },
الخطوة 6: احفظ النتائج واستمتع بها.

ملاحظة: جميع المعلمات المتعلقة بالحركة واللون... يمكنك تخصيصها بشكل تعسفي.

الأسئلة المتداولة حول تحريك الجسيمات المتحركة باستخدام مكتبة الجسيمات.js

كيفية الإصلاح عندما لا يتم عرض تأثيرات الجسيمات؟

تأكد من إضافة مكتبة الجسيمات.js الصحيحة إلى موقعك ومن إعداد تكوين JSON بشكل صحيح..

كيفية جعل تأثيرات الجسيمات تتحرك بسلاسة على الأجهزة المحمولة؟

يمكنك ضبط معلمات التكوين مثل عدد الجسيمات وسرعة الحركة لتحسين الأداء على الأجهزة المحمولة..

هل يمكن استخدام الجسيمات.js مع أطر عمل جافا سكريبت أخرى مثل React أو Angular؟

نعم، يمكنك دمج الجسيمات.js مع أطر عمل جافا سكريبت الحديثة مثل React أو Angular، ولكن يلزم إجراء بعض تعديلات التكوين لضمان التوافق..


الخاتمة

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

انتهى المقال الى هنا! اذا اعجبك مقال وأستفدت منه لاتنسى مشاركته مع الاصدقاء والعائلة. نحن نسعى دائما لتقديم الافضل.

عن المؤلف/

صدام المرشد
أنا مهندس برمجيات، أجد شغفي في تحويل الأفكار إلى مشاريع رقمية مبتكرة ومتميزة. أشارككم خبراتي المتنوعة في مجالات البرمجة، التقنية، وتصميم المواقع، بهدف تقديم محتوى ثري يلهم ويفيد.

إرسال تعليق