ساخت انیمیشن بارش باران با CSS

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

اصول کلی و انتخاب روش

دو رویکرد مرسوم وجود دارد: ایجاد قطرات جداگانه با عناصر HTML و انیمیشن دادن به هر کدام، یا استفاده از یک عنصر با box-shadow یا background برای تولید تعداد زیادی قطره به صورت بهینه. برای تعداد کم قطره‌ها روش اول ساده‌تر است؛ برای هزاران قطره روش دوم کاراتر و کم‌هزینه‌تر است.

روش ساده: چند عنصر HTML با CSS انیمیت

<div class="rain">
  <span class="drop" style="--i:1"></span>
  <span class="drop" style="--i:6"></span>
  <span class="drop" style="--i:3"></span>
  <!-- تعداد دلخواه -->
</div>

کد بالا ساختار HTML ساده‌ای است که با استفاده از متغیر CSS (–i) می‌توان برای هر قطره تأخیر و سرعت متفاوت تعریف کرد. در ادامه CSS مربوطه را می‌بینید.

.rain{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(#0e3, #034); /* نمونه پس‌زمینه */}

.drop{
  position: absolute;
  top: -10%;
  width: 2px;
  height: 20px;
  background: rgba(255,255,255,0.8);
  left: calc(100% * (var(--x, 0.5)));
  transform: translateY(-100%);
  animation: fall calc(1.5s * var(--speed, 1)) linear infinite;
  animation-delay: calc(var(--i) * -0.5s);
  opacity: 0.9;
  border-radius: 1px;
  will-change: transform, opacity;
}

@keyframes fall{
  0% { transform: translateY(-10vh); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}

توضیح: این CSS قطره‌ها را از بالای صفحه به پایین می‌فرستد. با متغیرهای –i و –speed می‌توانیم زمان و تأخیر هر قطره را تغییر دهیم. از will-change برای بهبود عملکرد استفاده شده تا مرورگر از رندر بهتر استفاده کند.

نسخه بهینه: تولید تعداد زیاد قطره با box-shadow

برای ایجاد صدها قطره بدون اضافه‌کردن عناصر HTML، می‌توان از ترفند box-shadow روی یک عنصر استفاده کرد. این روش کم‌هزینه‌تر از نظر DOM و رندر است.

.rain-big{
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(#0b2, #013);
  overflow: hidden;
}

.rain-big::after{
  content: "";
  position: absolute;
  top: -10vh;
  left: 0;
  right: 0;
  height: 10vh;
  background: transparent;
  box-shadow:
    10vw 20vh #fff,
    30vw 40vh #bfe,
    50vw 60vh #dff,
    70vw 10vh #9ff,
    90vw 80vh #cff; /* می‌توانید لیست را تا صدها موقعیت ادامه دهید */  animation: rain-fall 1.8s linear infinite;
  will-change: transform, opacity;
}

@keyframes rain-fall{
  to { transform: translateY(120vh); opacity: 0; }
}

توضیح: در این مثال از ::after و خاصیت box-shadow برای رسم چندین نقطه/خط استفاده شده که با یک انیمیشن کلی حرکت می‌کنند. این روش برای مقیاس بزرگ و تعداد زیاد قطره مناسب است اما نگهداری فهرست سایه‌ها ممکن است پیچیده شود؛ می‌توان آن را با ابزارها یا اسکریپت تولید کرد.

نمونه ترکیبی با JavaScript برای تصادفی‌سازی

برای واقع‌گرایانه‌تر شدن باران می‌توان با یک اسکریپت کوتاه تعداد زیادی قطره تولید و موقعیت/سرعت تصادفی به آنها داد:

const container = document.querySelector('.rain');
for(let i=0;i<100;i++){
  const drop = document.createElement('span');
  drop.className = 'drop';
  drop.style.setProperty('--i', Math.random()*6);
  drop.style.setProperty('--speed', 0.8 + Math.random()*1.2);
  drop.style.left = Math.random()*100 + 'vw';
  container.appendChild(drop);
}

توضیح: این کد 100 عنصر <span> ساخته و متغیرهای CSS هر کدام را با مقادیر تصادفی پر می‌کند. این رویکرد ترکیبی، مزیت کنترل دقیق‌تر و سادگی تولید را دارد. در کاربردهای سنگین توصیه می‌شود تعداد را به اندازه‌ای نگه دارید که FPS پایین نیاید.

نکات بهینه‌سازی و سازگاری

• از transform (translateY) به جای تغییر top/left استفاده کنید تا از GPU بهره ببرید.
• will-change را فقط روی عناصری که لازم است اعمال کنید تا حافظه اضافه مصرف نشود.
• برای موبایل تعداد قطره‌ها را کاهش دهید یا یک نسخه سبک‌تر باران ارائه دهید.
• از prefers-reduced-motion برای احترام به تنظیمات کاربر استفاده کنید.

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

• استفاده از فیلتر blur یا blend-mode برای ایجاد عمق میدان و جلوه مه‌آلود.
• همگام‌سازی صدا (صدای باران) با انیمیشن برای تجربه چندرسانه‌ای، اما با کنترل کاربر.
• لود دینامیک: باران را تنها در بخش‌هایی از صفحه که قابل مشاهده هستند فعال کنید (Intersection Observer).
• استفاده از SVG برای قطره‌هایی با شکل متفاوت و بعد از تبدیل به path می‌توان آن‌ها را با SMIL یا CSS حرکت داد.

مثال کامل (جمع‌بندی)

در اینجا یک نمونه کامل ترکیبی (HTML + CSS + JS) که قابل‌توسعه است را می‌توان با ترکیب کدهای بالا ساخت: یک کانتینر، JS برای تولید قطره‌ها و CSS بهینه برای انیمیشن. در اجرا به موبایل فکر کنید و تنظیمات را بر اساس رزولوشن و توان دستگاه تغییر دهید.

امیدوارم با کدها و نکات فوق بتوانید انیمیشن بارش باران زیبا، بهینه و قابل تنظیمی با CSS بسازید. برای پروژه‌های تولیدی همیشه تست عملکرد در موبایل و مرورگرهای مختلف را فراموش نکنید.

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

ارسال