تأثير المطر: رقصة القطرات على النوافذ باستخدام CSS وSass

في سبيل تحقيق تأثير جميل لقطرات المطر على نافذة الصفحة باستخدام CSS فقط، يُمكن استخدام HAML وSass لتسهيل كتابة الشيفرة بطريقة أنيقة ومنظمة. دعونا نتابع الخطوات لإنشاء هذا التأثير البديع.

أولاً، يمكننا استخدام HAML لبناء هيكل الصفحة بشكل أنيق وسهل القراءة. في المثال التالي، سنقوم بإنشاء نافذة بإطار ونعمل على تضمين Sass لتنظيم أنماط CSS:

hamlCopy code
%body
  .window
    - (1..100).each do |i|
      %div{ class: "raindrop #{i}" }

ثم يمكننا استخدام Sass لتحديد أنماط CSS المرتبطة بتأثير المطر:

sassCopy code
$drop-count: 100;

@for $i from 1 through $drop-count {
  $delay: random()*5;
  $duration: random()*0.5 + 0.5;
  $size: random()*5 + 2;
  
  .raindrop.#{$i}
    animation: drop#{$i} $duration linear infinite;
    animation-delay: $delay + "s";
    width: $size + "px";
    height: $size + "px";
    background-color: #00f;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

@keyframes drop#{$i} {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(500px);
    opacity: 0;
  }
}

في هذا السياق، تم استخدام دالة random() لتوليف تأخير الرذاذ وزمن الرحيل وحجم الرذاذ بشكل عشوائي، مما يخلق تأثيرًا طبيعيًا. الرذاذ يتساقط بشكل غير متناظر لتعزيز واقعية التأثير.

يمكنك تضمين هذه الشيفرة في ملف HAML وملف Sass، ومن ثم تحويلها إلى HTML و CSS بواسطة المترجمين المناسبين. يتيح لنا هذا الرمز إنشاء تأثير مميز لقطرات المطر يعكس جمالية الواجهة ويضيف لمسة جذابة إلى صفحتك عبر تقنيات CSS المتقدمة واستخدام HAML وSass لتنظيم الشيفرة بطريقة أفضل.

بالتأكيد، دعونا نعمق أكثر في التفاصيل لتوفير مزيد من المعلومات حول تأثير قطرات المطر على نافذة باستخدام CSS، HAML، وSass.

1. هيكل الصفحة باستخدام HAML:
   في مثال الشيفرة السابق، استخدمنا HAML لتبسيط كتابة هيكل الصفحة. العنصر الرئيسي هو window الذي يمثل نافذة الصفحة. ثم، باستخدام حلقة each، قمنا بإنشاء 100 عنصر div يمثلون قطرات المطر.

2. تنظيم الأنماط باستخدام Sass:
   تم استخدام Sass لتنظيم الأنماط الخاصة بكل قطرة مطر. باستخدام حلقة @for، تم إنشاء قواعد CSS لكل عنصر div الذي يحمل فئة raindrop. تم استخدام دالة random() لإعطاء تأثير عشوائي لتأخير الرذاذ، زمن الرحيل، وحجم الرذاذ.

3. تأثير الرذاذ باستخدام الرسوم المتحركة CSS:
   تم استخدام خاصية animation في CSS لتطبيق تأثير الرذاذ. كل قطرة تنخرط في تأثير يسمى drop#{$i}، حيث يتم تحديد الطور الأولي والطور النهائي للرذاذ وكذلك الشكل الزمني للتأثير.

4. التحكم في الظهور والاختفاء:
   تم استخدام الطور الأولي والطور النهائي في تأثير الرذاذ للتحكم في ظهور واختفاء قطرات المطر. في النصف الأول من التأثير، تظهر القطرة ببطء مع تحول الشفافية. في النصف الثاني، تختفي القطرة بسلاسة وتتحرك إلى الأسفل.

5. تحديد أحجام مختلفة للقطرات:
   تم استخدام random() أيضًا لتحديد أحجام مختلفة لقطرات المطر. هذا يعطي شكلاً أكثر تنوعًا وطبيعية للتأثير.

6. تحسين التظليل باستخدام الظل:
   تم إضافة خاصية box-shadow لكل قطرة لتحسين التظليل وجعل التأثير أكثر واقعية.

بهذه الطريقة، يمكنك تخصيص وتعديل التأثير وفقًا لاحتياجاتك، سواء كان ذلك بتغيير ألوان الرذاذ، أحجامها، أو حتى طريقة ظهورها. إن استخدام HAML وSass يجعل الشيفرة أنيقة وسهلة الصيانة، ويساعد في تحقيق تأثير جذاب وملفت للنظر على صفحتك.