ساخت افکت بارش ستاره با CSS

افکت «بارش ستاره» (starfall یا star rain) یک جلوه بصری جذاب است که در هدرها، پس‌زمینهٔ جشن‌ها، صفحه تشکر و اسلایدرها استفاده می‌شود. در این مقاله انواع روش‌های ساخت این افکت با CSS را بررسی می‌کنیم: از نسخهٔ سادهٔ خالص CSS تا نسخهٔ پیشرفته با کمک JavaScript برای تصادفی‌سازی و بهینه‌سازی عملکرد. همچنین نکات دسترسی و بهینه‌سازی برای تجربهٔ کاربری بهتر را خواهیم گفت.

مفاهیم پایه و نکات فنی

• برای انیمیشن روان از transform (translateY) و opacity استفاده کنید تا مرورگر از GPU بهره ببرد.
• به جای ایجاد صدها عنصر DOM، از pseudo-elements یا تولید برنامه‌ای عناصر استفاده کنید تا بار کمتر شود.
• از @media (prefers-reduced-motion) برای احترام به تنظیمات کاربر استفاده کنید.
• اگر نیاز به بالاترین عملکرد است، Canvas یا WebGL گزینهٔ بهتری نسبت به صدها عنصر DOM خواهد بود.

روش اول — افکت ساده فقط با CSS

<div class="sky">
  <div class="star" style="--i:0;">
</div> <!-- تکرار به تعداد دلخواه --> </div> .sky{ position:relative; width:100%; height:400px; background:#03061a; overflow:hidden; } .star{ position:absolute; top:-10px; left:calc(var(--i) * 10%); width:4px; height:4px; background:linear-gradient(45deg,#fff,#ffd); border-radius:50%; opacity:.9; transform:translateY(-100vh) translateX(0); animation:fall calc(6s + var(--i) * .8s) linear infinite; will-change:transform,opacity; } @keyframes fall{ 0%{ transform:translateY(-10vh) scale(.8); opacity:0} 10%{ opacity:1 } 100%{ transform:translateY(110vh) scale(1.2); opacity:0 } }

این کد المان‌های ستاره را به صورت ثابت در DOM تعریف می‌کند و با استفاده از متغیر CSS --i زمان و مکان اولیهٔ هر ستاره را تنظیم می‌کند. انیمیشن با transform: translateY انجام می‌شود تا از GPU استفاده شود و روان‌تر باشد. این روش ساده و مناسب نمونه‌ها و صفحات با تعداد ستارهٔ محدود است.

روش دوم — تولید تصادفی با JavaScript و بهبود عملکرد

// JavaScript to generate stars dynamically
const sky = document.querySelector('.sky');
const STAR_COUNT = 80;

for(let i=0;i<STAR_COUNT;i++){
  const s = document.createElement('div');
  s.className = 'star';
  const left = Math.random()*100;
  const delay = Math.random()*5;
  const duration = 4 + Math.random()*6;
  const size = 1 + Math.random()*3;
  s.style.left = left + '%';
  s.style.width = size + 'px';
  s.style.height = size + 'px';
  s.style.animationDelay = '-' + delay + 's';
  s.style.animationDuration = duration + 's';
  sky.appendChild(s);
}

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

/* complementary CSS */.sky{ position:relative; height:400px; background:#010317; overflow:hidden; }
.star{
  position:absolute; top:-5px;
  background:white; border-radius:50%;
  opacity:.95; will-change:transform,opacity;
  animation-name:fall; animation-timing-function:linear;
}
@keyframes fall{
  0%{ transform:translateY(-20vh); opacity:0 }
  10%{ opacity:1 }
  100%{ transform:translateY(120vh); opacity:0 }
}

CSS کمپلمانتر بالا انیمیشن و رفتار ستاره‌ها را تعریف می‌کند. با جاوااسکریپت، مقدارهای درون-خطی برای تاخیر و مدت زمان تغییر می‌کنند تا هر ستاره مسیر و سرعت متفاوتی داشته باشد.

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

• از will-change: transform برای اطلاع به مرورگر استفاده کنید اما نابه‌جا از آن کنار نگذارید چون حافظهٔ GPU مصرف می‌کند.
• برای عملکرد بالا تعداد عناصر را محدود کنید یا از requestAnimationFrame/Canvas استفاده نمایید.
• برای دستگاه‌های کم‌قدرت یا کاربران با نیازهای دسترسی، از @media (prefers-reduced-motion: reduce) استفاده کنید.

@media (prefers-reduced-motion: reduce){
  .star{ animation:none; opacity:.6; filter:blur(0.5px); }
}

کد بالا انیمیشن را برای کاربرانی که حرکت کاهش‌یافته را ترجیح می‌دهند خاموش می‌کند و به جای آن یک ظاهر ایستا اما قابل قبول ارائه می‌دهد.

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

موارد استفاده و ایده‌ها

• پس‌زمینهٔ صفحات تبریک، تولد یا جشن‌ها
• هدر سایت با انیمیشن ملایم و کوتاه
• افکت هنگام دریافت پیام یا موفقیت در فرم
• ترکیب با parallax برای عمق بیشتر

برای مثال در یک صفحهٔ لندینگ می‌توانید افکت را محدود به هدر کنید تا محتوای اصلی تحت تأثیر عملکرد قرار نگیرد. همچنین می‌توانید از رنگ‌های متنوع، افکت تابش (glow) و تغییر اندازه برای ایجاد عمق استفاده کنید.

دسترسی و سازگاری

همیشه از @media (prefers-reduced-motion) استفاده کنید، متن‌های مهم را روی انیمیشن قرار ندهید و کنترل غیرفعال‌سازی انیمیشن را در UI قرار دهید. همچنین تست روی مرورگرها و دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) را فراموش نکنید.

جمع‌بندی و نکات تکمیلی

افکت بارش ستاره با CSS می‌تواند ساده یا پیچیده باشد. برای پروژه‌های کوچک از CSS خالص استفاده کنید، برای جلوهٔ طبیعی‌تر و تصادفی از JavaScript بهره ببرید و برای مقیاس بزرگ یا نیاز به فیزیک پیچیده از Canvas/WebGL استفاده کنید. همیشه به عملکرد و دسترسی توجه کنید تا تجربهٔ کاربری بهینه حفظ شود.

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

ارسال