مرحبا بكم يا اصدقائي اليوم سوف نشرح لكم كيفية تركيب جسيمات باستخدام الجسيمات.js هي مكتبة جافا سكريبت خفيفة الوزن وسهلة الاستخدام تتيح لك إنشاء تأثيرات جسيمات متحركة مثيرة للإعجاب على موقع الويب الخاص بك. باستخدام الجسيمات.js ، يمكنك بسهولة إضافة تأثيرات إلى موقع الويب الخاص بك مثل الشهب أو تساقط الثلوج أو أي تأثير آخر يعتمد على الجسيمات يمكنك تخيله. وهذا لا يزيد من جماليات الموقع فحسب، بل يخلق أيضًا تجربة تصفح فريدة وممتعة للمستخدمين.
كيفية إنشاء تأثيرات الجسيمات المتحركة باستخدام مكتبة الجسيمات.js |
تخصيص تأثيرات الجسيمات
دمج التأثيرات في الموقع
تعليمات لإنشاء تأثيرات الجسيمات المتحركة
<head>
.<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'/>
]]></b:skin>
.#particles-js {position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;background-color: var(--lightBg);}
ملاحظة: استبدل المكان var(--lightBg)بلون الخلفية المفضل لديك.
</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
},
ملاحظة: جميع المعلمات المتعلقة بالحركة واللون... يمكنك تخصيصها بشكل تعسفي.
الأسئلة المتداولة حول تحريك الجسيمات المتحركة باستخدام مكتبة الجسيمات.js
كيفية الإصلاح عندما لا يتم عرض تأثيرات الجسيمات؟
تأكد من إضافة مكتبة الجسيمات.js الصحيحة إلى موقعك ومن إعداد تكوين JSON بشكل صحيح..
كيفية جعل تأثيرات الجسيمات تتحرك بسلاسة على الأجهزة المحمولة؟
يمكنك ضبط معلمات التكوين مثل عدد الجسيمات وسرعة الحركة لتحسين الأداء على الأجهزة المحمولة..
هل يمكن استخدام الجسيمات.js مع أطر عمل جافا سكريبت أخرى مثل React أو Angular؟
نعم، يمكنك دمج الجسيمات.js مع أطر عمل جافا سكريبت الحديثة مثل React أو Angular، ولكن يلزم إجراء بعض تعديلات التكوين لضمان التوافق..
الخاتمة: يقدم الجسيمات.js طريقة بسيطة لكنها قوية لإضافة تأثيرات الجسيمات المتحركة إلى موقع الويب الخاص بك، مما يجعله أكثر حيوية وجاذبية للمستخدمين. باتباع خطوات التثبيت والتخصيص والتكامل التي شاركناها، ستتمكن بسهولة من إنشاء تأثيرات جميلة وفريدة من نوعها لموقعك على الويب. لا تنس تجربة التكوينات المختلفة للعثور على التأثير الذي يناسب أسلوبك. الجسيمات.js ليست مجرد أداة للرسوم المتحركة، ولكنها أيضًا وسيلة للتعبير عن إبداعك وإبراز موقع الويب الخاص بك.
شكرا للقراءة: كيفية إنشاء تأثيرات الجسيمات المتحركة باستخدام مكتبة الجسيمات.js, فضلن شارك أصدقائك المقال :)