طراحی پس زمینه ذرات با CSS

پس‌زمینه ذرات (Particle Background) یکی از جلوه‌های بصری محبوب در طراحی وب است که به بخش‌های هِرو، صفحات لندیگ یا هر جایی که می‌خواهیم حس پویایی و عمق اضافه کنیم، جلوه می‌بخشد. می‌توان این افکت را با راهکارهای مختلف از جمله pure CSS، عناصر DOM متعدد و یا ترکیب CSS با Canvas/JS پیاده‌سازی کرد. در این مقاله روش‌های عملی، نمونه کد، بهینه‌سازی‌ها و نکات دسترسی را بررسی می‌کنیم.

مفاهیم پایه

• ذرات می‌توانند استاتیک یا متحرک باشند؛ حرکت با keyframes یا transform انجام می‌شود.
• عملکرد مهم است — تعداد زیاد عناصر DOM و انیمیشن‌های سنگین باعث افت فریم می‌شوند.
• از will-change، transform و opacity برای کاهش بار رندر استفاده کنید.
• برای کاربرانی که ترجیح می‌دهند انیمیشن نداشته باشند، باید prefers-reduced-motion را رعایت کرد.

روش‌های متداول

• Pure CSS با box-shadow یا radial-gradient — کم‌هزینه در DOM اما محدود در انیمیشن‌های پیچیده.
• DOM-based با تعداد زیاد عناصر (مثلاً چندین <span>) — کنترل آسان اما بار DOM زیاد.
• Canvas یا WebGL (با JS) — بهترین عملکرد و مقیاس‌پذیری برای هزاران ذره.

نمونه 1 — پس‌زمینه ذرات ساده با box-shadow (Pure CSS)

/* CSS */.particles {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.9) 0 2px, transparent 3px),
              radial-gradient(circle at 40% 60%, rgba(255,255,255,0.7) 0 2px, transparent 3px);
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

این کد از چند گرادیان شعاعی برای ایجاد چند ذره استاتیک استفاده می‌کند. مزیت این روش عدم نیاز به عناصر اضافی است و بار DOM کم می‌ماند. اما برای تعداد زیاد یا حرکت پیچیده مناسب نیست.

نمونه 2 — ذرات متحرک با عناصر کم و keyframes

/* HTML
<div class="hero">
<div class="particle particle-1"></div>
<div class="particle particle-2"></div>
<div class="particle particle-3"></div>
</div>
*/ /* CSS */ .hero { position: relative; overflow: hidden; height: 60vh; background: #0b1221; } .particle { position: absolute; width: 8px; height: 8px; background: rgba(255,255,255,0.8); border-radius: 50%; transform: translate3d(0,0,0); will-change: transform, opacity; opacity: 0.9; } .particle-1 { left: 10%; top: 20%; animation: float1 8s linear infinite; } @keyframes float1 { 0% { transform: translateY(0) translateX(0); opacity: 0.9; } 50% { transform: translateY(-40px) translateX(20px); opacity: 0.6; } 100% { transform: translateY(0) translateX(0); opacity: 0.9; } }

در این مثال چند عنصر .particle به صورت دستی تعریف شده و با @keyframes حرکت می‌کنند. استفاده از transform و will-change به بهبود عملکرد کمک می‌کند. برای تعداد زیاد این روش مناسب نیست مگر اینکه ذرات را با JS تولید و مدیریت کنید.

بهینه‌سازی و نکات فنی

• برای هزاران ذره از Canvas یا WebGL استفاده کنید؛ DOM-based روش مقیاس‌پذیر نیست.
• از transform و opacity به جای تغییرات layout (مثل left/top) استفاده کنید تا repaint کمتر شود.
• از prefers-reduced-motion برای غیرفعال‌سازی انیمیشن برای کاربران حساس استفاده کنید.
• از will-change با احتیاط استفاده کنید (استفاده بیش از حد حافظه را افزایش می‌دهد).

نمونه بهینه — box-shadow برای تولید تعداد زیاد ذرات در یک عنصر

.starfield {
  position: absolute;
  inset: 0;
  background: radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.9), transparent),
              radial-gradient(2px 2px at 20% 40%, rgba(255,255,255,0.85), transparent),
              radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.7), transparent);
  pointer-events: none;
}

در این رویکرد چندین گرادیان شعاعی در یک لایه ترکیب شده‌اند تا ذرات زیادی بدون اضافه شدن عناصر DOM ساخته شود. برای تولید حالت تصادفی قابل توسعه با preprocessor یا build step (مثلاً SCSS یا اسکریپت ساده) لیست موقعیت‌ها را تولید کنید.

مدیریت دسترسی و تجربه کاربران

• همیشه گزینه‌ای برای کاهش یا غیرفعال‌سازی انیمیشن‌ها در CSS قرار دهید:

@media (prefers-reduced-motion: reduce) {
  .particle, .starfield, .hero * { animation: none !important; transition: none !important; }
}

این قطعه تضمین می‌کند کاربران با حساسیت به حرکت، تجربه‌ای آرام‌تر داشته باشند.

مقایسه سریع روش‌ها

نکات پیشرفته و پیشنهادهای طراحی

• از CSS variables برای تغییر رنگ، سرعت و تراکم ذرات به صورت پویا استفاده کنید.
• برای ایجاد عمق، چند لایه ذرات با سرعت‌های متفاوت (parallax) اضافه کنید.
• برای موبایل تراکم را کاهش دهید و انیمیشن‌ها را ساده‌تر کنید.
• در پروژه‌های بزرگ، تولید خودکار CSS با اسکریپت (Node/Build) برای ایجاد هزاران موقعیت بهینه است.

در پایان، انتخاب روش بستگی به نیاز شما دارد: برای جلوه‌های ساده و سبک از CSS خالص، برای تعامل و تعداد زیاد از Canvas/JS و همیشه مراقب تجربه و کارایی کاربران باشید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال