افکت بارش باران با CSS — راهنمای کامل و عملی

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

موقعیت‌های کاربردی

• صفحه لندینگ با تم آب و طبیعت
• افکت پس‌زمینه برای بخش‌های معرفی محصول
• انیمیشن روی کارت‌های تصویری یا هدر
• افکت‌های جوّی در بازی‌های ساده مبتنی بر وب

روش 1 — افکت ساده با گرادیانت و انیمیشن پس‌زمینه

این روش برای باران سبک یا «رگه‌های بارانی» مناسب است و فقط با CSS انجام می‌شود. عملکرد مناسب و کم‌هزینه است.

/* Simple rain streaks using repeating-linear-gradient */.rain-bg {
  position: relative;
  overflow: hidden;
  background: #0a2540;
  height: 400px;
}

.rain-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -60deg,
    rgba(255,255,255,0.02) 0 2px,
    rgba(255,255,255,0.00) 2px 20px
  );
  opacity: 0.8;
  animation: rain-move 1.5s linear infinite;
  pointer-events: none;
}

@keyframes rain-move {
  from { transform: translateY(-20%); }
  to { transform: translateY(100%); }
}

توضیح: این کد یک عنصر ::before با گرادیانت تکرارشونده ایجاد می‌کند که خطوط نازکی شبیه بارش تولید می‌کند. انیمیشن با translateY حرکت عمودی را شبیه‌سازی می‌کند که نسبتاً سبک اجرا می‌شود و مناسب پس‌زمینه‌هاست.

مزایا و محدودیت

• مزایا: پیاده‌سازی ساده، بهینه برای عملکرد
• محدودیت‌ها: قطرات مجزا و برخورد با عناصر دیگر قابل کنترل نیستند

روش 2 — قطرات مجزا با HTML+CSS و ایجاد داینامیک با JS

برای باران واقع‌گرایانه‌تر از مجموعه المان‌های کوچک (span) استفاده می‌کنیم و با جاوااسکریپت تعداد دلخواهی قطره تولید می‌کنیم. بهتر است انیمیشن‌ها با transform اجرا شوند تا GPU-accelerated باشند.

<div class="rain-container"></div>

<style>
.rain-container {
  position: relative;
  overflow: hidden;
  height: 500px;
  background: linear-gradient(#0b2b45, #07182a);
}

/* base style for a drop */.drop {
  position: absolute;
  top: -10%;
  width: 2px;
  height: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.2));
  transform: translateY(-100%) rotate(-10deg);
  opacity: 0.8;
  border-radius: 50%;
  animation: fall linear infinite;
  will-change: transform, opacity;
}

@keyframes fall {
  to {
    transform: translateY(110%) rotate(-10deg);
    opacity: 0.2;
  }
}
</style>

<script>
const container = document.querySelector('.rain-container');
const drops = 80; // number of drops

for (let i = 0; i < drops; i++) {
  const d = document.createElement('span');
  d.className = 'drop';
  // random horizontal position
  d.style.left = Math.random() * 100 + '%';
  // random delay and duration
  const dur = 0.8 + Math.random() * 1.2;
  d.style.animationDuration = dur + 's';
  d.style.animationDelay = -(Math.random() * dur) + 's';
  // random height/width to vary drops
  const scale = 0.6 + Math.random() * 1.4;
  d.style.transform = `translateY(-100%) rotate(${(-10 + Math.random()*5)}deg) scale(${scale})`;
  container.appendChild(d);
}
</script>

توضیح: این مثال یک کانتینر دارد و با جاوااسکریپت چندین span با کلاس .drop ایجاد می‌کند. هر قطره موقعیت افقی، مدت و تأخیر انیمیشن متفاوتی دارد تا ظاهر طبیعی‌تر شود. انیمیشن از بالا به پایین با translateY انجام می‌شود که برای عملکرد بهتر توصیه می‌شود.

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

• برای اجرای روان از transform (translate) و opacity استفاده کنید نه top/left.
• از will-change برای پیش‌بینی تغییرات استفاده کنید، اما روی تعداد کم اجزا و برای مدت طولانی از آن دوری کنید.
• برای دستگاه‌های کم‌قدرت یا کاربران با ترجیح کاهش حرکت از media query زیر استفاده کنید:

@media (prefers-reduced-motion: reduce) {
  .drop, .rain-bg::before {
    animation: none;
    opacity: 0.5;
  }
}

توضیح: media query بالا انیمیشن را برای کاربرانی که درخواست کاهش حرکت کرده‌اند غیرفعال می‌کند. این یک نکته‌ی ضروری برای دسترسی و تجربه کاربری بهتر است.

پارامترها و متغیرهای مفید (جدول)

ایده‌های پیشرفته و افکت‌های ترکیبی

• اضافه کردن splashes هنگام برخورد قطره به پایین با یک عنصر جداگانه یا استفاده از CSS animation-delay برای قواعد بعدی.
• نورپردازی و افکت blur با filter: blur(…) برای عمق دادن.
• ترکیب با پس‌زمینه متحرک (مثل ابرها) برای حس آب‌وهوا بهتر.
• ایجاد قطرات روی شیشه با استفاده از backdrop-filter یا mix-blend-mode برای افکت‌های خاص.

نکات عملکردی و سازگاری

• برای تعداد بالا از canvas یا WebGL استفاده کنید اگر نیاز به صدها قطره دارید؛ CSS/DOM برای صدها عنصر سنگین می‌شود.
• همیشه تست روی موبایل با شبکه ضعیف و پردازنده ضعیف انجام دهید.
• از تصاویر بزرگ برای قطره‌ها استفاده نکنید؛ بهتر است با گرادیانت یا SVG کوچک کار کنید.

جمع‌بندی و پیشنهادات عملی

برای یک افکت ساده و کم‌هزینه از گرادیانت و انیمیشن پس‌زمینه استفاده کنید. اگر نیاز به جزئیات و تعامل بیشتر دارید، ترکیب CSS و تولید داینامیک با جاوااسکریپت راه‌حل مناسبی است. برای کارایی بالا همیشه انیمیشن‌ها را با transform انجام دهید و گزینه prefers-reduced-motion را رعایت کنید.

در صورت نیاز می‌توان مثال پیشرفته‌تری شامل برخورد قطرات با عناصر، صدا (اختیاری) یا استفاده از SVG و canvas ارائه کرد تا عملکرد و ظاهر حرفه‌ای‌تر شود.

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

ارسال