باستخدام Particles.js، يمكنك بسهولة إضافة تأثيرات مثل الشهب أو تساقط الثلوج أو أي تأثير آخر يعتمد على الجسيمات يمكنك تخيله إلى موقع بلوجر. وهذا لا يزيد من جماليات الموقع فحسب، بل يخلق أيضًا تجربة تصفح فريدة وممتعة للمستخدمين.
يوفر لك Particles.js مجموعة واسعة من الخيارات لتخصيص تأثيرات الجسيمات لتناسب تصميم مدونتك بشكل أفضل. يمكنك ضبط عدد الجسيمات واللون والشفافية وسرعة الحركة والعديد من الخصائص الأخرى من خلال ملف التكوين JSON. تعني هذه المرونة أنه يمكنك إنشاء تأثيرات فريدة وشخصية كما يحلو لك.تأثيرات
لدمج تأثيرات الجسيمات في موقع الويب الخاص بك، تحتاج إلى إدخال كود HTML الضروري حيث تريد عرض التأثير على الصفحة. وفي الوقت نفسه، تأكد من ربط ملف JavaScript الخاص بمكتبة Particles.js بشكل صحيح في صفحتك.
أثناء عملية التكامل، قد تكون هناك بعض المشكلات مثل عدم عرض التأثيرات بشكل صحيح على الأجهزة أو المتصفحات المختلفة. لإصلاح ذلك، تحتاج إلى إعادة التحقق من التعليمات البرمجية المصدر والتكوين للتأكد من إعداد كل شيء بشكل صحيح.
طريقة التركيب
قم بتسجيل الدخول إلى صفحة إدارة بلوجر
انقر على الموضوع تحرير HTML
انسخ مكتبة Particles.js والصقها تحت الوسم <head>
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'/>
استمر في نسخ ملف CSS أدناه والصقه على العلامة ]]></b:skin>
منشورات قد تهمك
#particles-js {position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;background-color: var(--lightBg);}
ثم انسخ ملف JS أدناه والصقه في العلامة </body>
استبدل var(--lightBg) بلون الخلفية المفضل لديك.
<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
},
"move": {
"enable": true,
"speed": 1.6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
</script>
يقدم Particles.js طريقة بسيطة لكنها قوية لإضافة تأثيرات الجسيمات المتحركة إلى موقع الويب الخاص بك، مما يجعله أكثر حيوية وجاذبية للمستخدمين.
باتباع خطوات التثبيت والتخصيص والتكامل التي شاركناها، ستتمكن بسهولة من إنشاء تأثيرات جميلة وفريدة من نوعها لموقعك على الويب.
لا تنس تجربة التكوينات المختلفة للعثور على التأثير الذي يناسب أسلوبك. Particles.js ليست مجرد أداة للرسوم المتحركة، ولكنها أيضًا وسيلة للتعبير عن إبداعك وإبراز موقع الويب الخاص بك.
