ساخت افکت ذرات نور با CSS

افکت ذرات نور (light particles) یکی از پرطرفدارترین جلوه‌های بصری برای پس‌زمینه و بخش‌های هیرو در وب‌سایت‌ها است. با CSS می‌توان افکت‌های سبک، تعاملی و قابل تنظیم ایجاد کرد که مصرف منابع پایینی داشته باشند. در این مقاله روش‌های مختلف، مثال‌های عملی و نکات بهینه‌سازی برای ساخت افکت ذرات نور با CSS را بررسی می‌کنیم.

روش‌های معمول پیاده‌سازی

• استفاده از عناصر DOM متعدد (مثل span) و انیمیشن‌های transform/opacity
• استفاده از pseudo-element و box-shadow برای تولید تعداد زیادی «ذره» بدون عناصر اضافی
• استفاده از SVG یا canvas برای کنترل دقیق‌تر و عملکرد بالاتر (در صورت نیاز به هزاران ذره)

مثال ساده با عناصر HTML و CSS

<div class="particles">
  <span class="particle" style="--i:1;"></span>
  <span class="particle" style="--i:2;"></span>
  <span class="particle" style="--i:3;"></span>
  <!-- تعداد دلخواه -->
</div>

.particles{
  position: relative;
  width: 100%;
  height: 400px;
  background: linear-gradient(180deg,#021124 0%, #06253a 100%);
  overflow: hidden;
}
.particle{
  position: absolute;
  left: calc(var(--i) * 10%); /* نمونه ساده برای توزیع */  top: 80%;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.1) 60%);
  border-radius: 50%;
  filter: blur(1px);
  transform: translateY(0) scale(1);
  opacity: 0;
  animation: floatUp calc(6s + var(--i) * 0.5s) infinite ease-in;
  animation-delay: calc(var(--i) * -1s);
  will-change: transform, opacity;
}
@keyframes floatUp{
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(-420px) scale(1.2); opacity: 0; }
}

در این نمونه هر عنصر <span> نماینده یک ذره است. با استفاده از متغیر CSS –i طول و تأخیرهای متفاوتی به هر ذره دادیم تا حرکت آن‌ها طبیعی‌تر به نظر برسد. انیمیشن از موقعیت پایین به بالا حرکت می‌کند و هم‌زمان سایز و شفافیت تغییر می‌کند. ویژگی will-change به مرورگر کمک می‌کند تا بهینه‌سازی رندِر را انجام دهد.

بهینه‌سازی: استفاده از box-shadow برای کاهش DOM

<div class="particle-cloud"></div>

.particle-cloud{
  position: relative;
  width: 100%;
  height: 400px;
  background: radial-gradient(circle at 20% 20%, rgba(255,200,150,0.05), transparent 30%),
              linear-gradient(180deg,#021124,#06253a);
  overflow: hidden;
}
.particle-cloud::before{
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  box-shadow:
    20px 300px 6px rgba(255,255,255,0.9),
    80px 320px 4px rgba(255,200,220,0.8),
    160px 290px 3px rgba(200,230,255,0.6),
    240px 310px 5px rgba(255,255,200,0.7),
    /* ... می‌توان چندین shadow اضافه کرد ... */    ;
  filter: blur(1px);
  animation: drift 8s linear infinite;
  will-change: transform;
}
@keyframes drift{
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-420px); opacity: 0.6; }
}

این روش ذرات را با تنها یک pseudo-element و چندین مقدار box-shadow ایجاد می‌کند. مزیت: تعداد عناصر DOM پایین می‌آید و هزینه JavaScript حذف می‌شود. معایب: کنترل هر ذره مستقل محدودتر است و تغییرات داینامیک پیچیده‌تر می‌شود.

نکات حرفه‌ای و قابل اجرا

• ترجیح transform و opacity: انیمیشن‌های مبتنی بر transform/opacity توسط GPU شتاب داده می‌شوند و از reflow جلوگیری می‌کنند.
• استفاده از will-change: اما مراقب باشید؛ تعیین بیش از حد will-change می‌تواند حافظه را افزایش دهد.
• prefers-reduced-motion: برای کاربران حساس به حرکت، انیمیشن را کاهش یا غیرفعال کنید.
• mix-blend-mode: استفاده از mix-blend-mode: screen یا lighten می‌تواند جلوه نور را طبیعی‌تر کند.
• فیلترها و blur: فیلترها پرهزینه‌اند؛ مقدار کم و محدود استفاده کنید.

حفظ دسترسی و تنظیمات کاربر

@media (prefers-reduced-motion: reduce) {
  .particle, .particle-cloud::before {
    animation: none !important;
    opacity: 0.6;
  }
}

این قطعه اطمینان می‌دهد که در صورت فعال بودن تنظیم کاهش حرکت در سیستم عامل، انیمیشن‌ها متوقف می‌شوند و تجربه کاربری بهتر و سالم‌تری ارائه می‌شود.

مقایسه روش‌ها — جدول سریع

نمونه‌های کاربردی و ایده‌ها

• پس‌زمینه هِرو (hero background) با ذرات نرم و ملایم
• افکت hover برای کارت‌ها که هنگام ورود نشانگر ذرات نوری پخش می‌کند
• لغزنده‌ (slider) با ذراتی که سرعت یا رنگ آن‌ها با محتوا تغییر می‌کند

نکات تکمیلی برای تولید رندوم بدون JS

با استفاده از nth-child و متغیرهای CSS می‌توانید انواع متفاوتی از اندازه، تأخیر و موقعیت به عناصر بدهید. اگر نیاز به رندم واقعی دارید، JS ترکیب‌شده با CSS متغیرها راهکار مناسبی است.

خلاصه و پیشنهادات عملی

برای پروژه‌های سبک و متوسط، استفاده از عناصر محدود همراه با transform/opacity یا استفاده از box-shadow برای کاهش DOM پیشنهاد می‌شود. در پروژه‌هایی که به هزاران ذره نیاز دارید، از canvas یا WebGL بهره ببرید. همیشه تنظیم prefers-reduced-motion را لحاظ کنید و برای بهینه‌سازی از will-change و محدودسازی ناحیه رندر استفاده نمایید.

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

ارسال