پس زمینه متحرک برای سایت(افزودن افکت پارتیکل با المنتور)

افکت پارتیکل به‌ عنوان پس‌زمینه متحرک برای بخش‌های مختلف سایت استفاده میشود بدون نصب هیچ افزونه‌ای و فقط با المنتور و چند خط کد ساده قابل اجراست.

مرحله اول: آماده‌سازی ساختار اولیه

ابتدا کانتینری که می‌خواهید افکت پارتیکل برایش اعمال شود را انتخاب کنید، حالا داخل همین کانتینر یک المان HTML اضافه کنید و کد زیر را داخلش قرار بدهید:

<style>
/* Container for particles effect and content */
.particles-container {
position: relative; /* Container for stacking context */
}

/* Particles Effect Container */
#particles-js {
position: absolute; /* Positioned within the container */
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1; /* Ensure particles effect is behind other content */
}

/* Particles Canvas */
.particles-js-canvas-el {
width: 100%;
height: 100%;
position: absolute;
z-index: -1; /* Ensure particles canvas is behind other content */
}
</style>

<!-- Container for particles effect and content -->
<div class="particles-container">
<div id="particles-js"></div>
<!-- Your content here -->

</div>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// کد جاوا اسکریپت اینجا قرار داده شود
</script>

مرحله دوم: سایت vincentgarreau

حالا کافیست به آدرس https://vincentgarreau.com/particles.js مراجعه نمایید، چند افکت آماده و خیلی زیبا در این سایت وجود دارد:

Default → ساده و شیک
NASA → ذرات ستاره‌ای و کهکشانی
Bubble → حباب‌های رنگی
Snow → برف
Nyan Cat → گربه نیان

هر کدام را که دوست داشتید انتخاب کنید و بعد از انتخاب می‌توانید از پنل سمت راست رنگ، اندازه، تعداد، سرعت، شکل ذرات، خطوط اتصال و کلی گزینه دیگر را به دلخواه تغییر بدهید و سپس بر روی دکمه‌ی Codepen کلیک کنید، کدهای JS را در این صفحه کپی کنید.

مرحله سوم: قرار دادن کد جاوااسکریپت در المنتور

به ویرایشگر المنتور برگشته و همان المان HTML را ویرایش کنید و در جایی که مشخص شده کدهای JS را قرار دهید.↓

<script>
// کد جاوا اسکریپت اینجا قرار داده شود
</script>

مرحله چهارم: تنظیم شناسه CSS برای کانتینر اصلی

حالا باید کانتینر اصلی که المان HTML داخلش قرار دارد را انتخاب کنید.

به تب پیشرفته رفته ← قسمت شناسه CSS داخل کادر particles-js را بنویسید(بدون # و بدون فاصله).

مرحله پنجم: انتشار و مشاهده نتیجه

در آخر روی دکمه انتشار / بروزرسانی کلیک کنید، فقط توجه داشته باشید در محیط المنتور افکت را مشاهده نخواهید کرد.

با چند مرحله ساده و بدون نصب حتی یک افزونه توانستید یکی از جذاب‌ترین افکت‌ها را به سایت خود اضافه کنید، امیدواریم این آموزش از دیار وردپرس برای شما مفید بوده باشد، اگر سوالی داشتید در قسمت نظرات ثبت نمایید در اسرع وقت پاسخ خواهیم داد.