مجموعه‌ای از نمونه قالب‌های انیمیشن ذرات بوم برای ایجاد پس‌زمینه‌های شبکه مش چندضلعی در HTML، CSS و JavaScript


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

مفهوم ذرات بوم و شبکه مش چندضلعی




در طراحی وب، «ذرات بوم» به عنوان نقاط کوچک و متحرک در صفحه شناخته می‌شوند که با حرکت، تعامل، و اتصال به یکدیگر، یک شبکه پویا و زنده تشکیل می‌دهند. این ذرات می‌توانند به صورت تصادفی یا منظم حرکت کنند، و با استفاده از خطوط اتصال، شبکه‌ای چندضلعی یا مش را تشکیل دهند. این نوع انیمیشن، جذابیت بصری زیادی دارد و حس عمق و فضای سه‌بعدی را به وبسایت می‌افزاید.
شبکه مش چندضلعی، در واقع، مجموعه‌ای از خطوط است که بین نقاط مختلف (ذرات) کشیده شده‌اند. این خطوط، بر اساس فاصله و تعامل بین ذرات، ظاهر زنده و متغیر دارند. در نتیجه، این فریم‌ورک، حس حرکت و پویایی را منتقل می‌کند و می‌تواند به صورت پس‌زمینه، در قسمت‌های مختلف صفحه، یا حتی در بخش‌هایی خاص مورد استفاده قرار گیرد.

پیاده‌سازی این نوع انیمیشن‌ها با HTML، CSS و JavaScript




برای ساخت چنین پس‌زمینه‌های جذاب، نیازمند استفاده از ترکیب چند تکنولوژی هستیم. HTML برای ساختار پایه، CSS برای استایل‌دهی و تنظیمات ظاهری، و JavaScript برای کنترل حرکت، تعامل و انیمیشن‌ها. این سه ابزار در کنار هم، امکان ساخت انیمیشن‌های پیچیده و در عین حال کم‌هزینه را فراهم می‌کنند.

HTML: ساختار پایه




در این بخش، معمولاً از عنصر `<canvas>` استفاده می‌شود، زیرا این عنصر به راحتی قابلیت ترسیم گرافیک‌های دو-بعدی و سه-بعدی را دارد. در واقع، `<canvas>`، بستر مناسبی برای رسم ذرات و خطوط است که به صورت دینامیک و با کنترل کامل قابل بروزرسانی است.
مثال ساده:
html  


<canvas id="particles-background"></canvas>

در اینجا، یک عنصر canvas با شناسه `particles-background` تعریف می‌شود که در ادامه با JavaScript، محتوا و انیمیشن‌های لازم بر روی آن رسم می‌شوند.

CSS: تنظیمات ظاهری و پاسخگویی




در CSS، معمولاً اندازه‌ی `<canvas>` تنظیم می‌شود تا سطح صفحه یا بخش موردنظر را پوشش دهد. همچنین، می‌توان استایل‌های دیگر مانند پس‌زمینه، بی‌نظمی، و سایر افکت‌های ظاهری را اضافه کرد.
مثال:
css  


#particles-background {


  position: fixed;


  top: 0;


  left: 0;


  width: 100%;


  height: 100%;


  z-index: -1; /* پشت صفحه قرار گیرد */


}

این استایل، عنصر canvas را در کل صفحه قرار می‌دهد و در پس‌زمینه قرار می‌دهد، بنابراین دیگر عناصر صفحه بر روی آن قرار خواهند گرفت.

JavaScript: کنترل و انیمیشن




در این قسمت، وظیفه اصلی بر عهده‌ی JavaScript است. با استفاده از این زبان، ذرات، خطوط، و تعاملات آن‌ها کنترل می‌شود. برنامه‌نویس با تعریف آرایه‌ای از ذرات، هر کدام با مختصات، سرعت، و جهت خاص، شروع می‌کند. سپس، حلقه‌های انیمیشن، هر فریم را ترسیم و به‌روزرسانی می‌کنند.
در اینجا، چند بخش کلیدی وجود دارد:
- ایجاد ذرات: هر ذره، دارای مختصات x و y، سرعت در جهت‌های مختلف، و اندازه است.

- حرکت ذرات: در هر فریم، ذرات به سمت جلو حرکت می‌کنند، و اگر به حدود صفحه برسند، برمی‌گردند یا تغییر جهت می‌دهند.

- ترسیم خطوط: خطوط بین ذرات بر اساس فاصله آن‌ها کشیده می‌شود؛ البته، تنها در صورت نزدیک بودن.

- تعامل کاربر: در بعضی نمونه‌ها، حرکت موس یا کلیک، بر رفتار ذرات تاثیر می‌گذارد.

نمونه کد پایه برای شروع




در ادامه، نمونه‌ای ساده و قابل فهم آورده شده است:
javascript  


const canvas = document.getElementById('particles-background');


const ctx = canvas.get...  ← ادامه مطلب در magicfile.ir