تأثير قطرات المطر باستخدام CSS

إنشاء تأثير قطرات مطر على نافذة باستخدام CSS فقط عبر HAML وSass

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

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

1. مفهوم التأثير وأهميته

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

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

2. لماذا HAML وSass؟

HAML (HTML Abstraction Markup Language):

HAML هو بديل لـ HTML يهدف إلى جعل كتابة الهيكل الأساسي للصفحات أكثر سهولة ووضوحًا. يستخدم HAML بشكل شائع في بيئات تطوير Ruby on Rails، ولكنه يعمل مع أي مشروع ويب. الفائدة الرئيسية من استخدام HAML هي تبسيط كتابة HTML من خلال تقليل الفائض والكود المكرر، مما يساهم في تحسين الإنتاجية وجودة الكود.

Sass (Syntactically Awesome Stylesheets):

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

باستخدام HAML وSass، يمكننا إنشاء تأثير قطرة المطر بطريقة مرتبة وسهلة الفهم.

3. خطوات إنشاء التأثير

3.1 هيكل HAML

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

haml
CopyEdit
doctype html
html
  head
    title تأثير قطرات المطر
    meta charset="UTF-8"
    link rel="stylesheet" href="styles.css"
  body
    .window
      .rain
        .drop
        .drop
        .drop
        .drop
        .drop
        .drop

في هذا الكود، أنشأنا صفحة تحتوي على div رئيسية تمثل النافذة .window، داخلها توجد عناصر .rain التي تحتوي على عدة .drop تمثل القطرات.

3.2 تصميم CSS باستخدام Sass

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

scss
CopyEdit
$drop-size: 10px;
$drop-color: rgba(255, 255, 255, 0.8);
$window-width: 100vw;
$window-height: 100vh;

body {
  margin: 0;
  overflow: hidden;
  background-color: #2c3e50;
}

.window {
  position: relative;
  width: $window-width;
  height: $window-height;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1); /* تأثير شبه شفاف للنافذة */
}

.rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.drop {
  position: absolute;
  width: $drop-size;
  height: $drop-size;
  background-color: $drop-color;
  border-radius: 50%;
  animation: fall 2s linear infinite;
}

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

شرح الأنماط:

1. المتغيرات: في بداية الكود، قمنا بتعريف بعض المتغيرات مثل حجم القطرات ($drop-size) واللون الشفاف ($drop-color). هذه المتغيرات تجعل الكود أكثر مرونة.

2. النافذة: قمنا بتحديد .window بحيث تأخذ عرض وارتفاع الشاشة بالكامل (100vw و100vh).

3. القطرات: العناصر .drop تمثل القطرات، حيث قمنا بتحديد الحجم والشكل (دائرة باستخدام border-radius: 50%)، ثم أضفنا حركة باستخدام خاصية animation التي تحدد حركة القطرات من أعلى إلى أسفل.

4. التأثير المتحرك: قمنا باستخدام @keyframes لإنشاء حركة القطرات من أعلى الشاشة (translateY(-100px)) إلى أسفل الشاشة (translateY(100vh))، مع تغيير تدريجي في الشفافية من opacity: 1 إلى opacity: 0.

3.3 إضافة حركة عشوائية للقطرات

لنضفي على التأثير المزيد من الواقعية، يمكننا جعل القطرات تتحرك بشكل عشوائي باستخدام خاصية animation-delay و animation-duration. هذا سيساهم في جعل كل قطرة تتحرك بتوقيت مختلف.

scss
CopyEdit
.drop {
  position: absolute;
  width: $drop-size;
  height: $drop-size;
  background-color: $drop-color;
  border-radius: 50%;
  animation: fall 2s linear infinite;
  animation-delay: random(0s, 1s);
  animation-duration: random(1.5s, 3s);
}

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

@function random($min, $max) {
  @return $min + (random() * ($max - $min));
}

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

3.4 تحسين الأداء

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

يمكنك تحديد عدد القطرات داخل .rain باستخدام JavaScript لجعل العدد ديناميكيًا.

javascript
CopyEdit
const rainContainer = document.querySelector('.rain');
const numberOfDrops = 100; // عدد القطرات

for (let i = 0; i < numberOfDrops; i++) {
  const drop = document.createElement('div');
  drop.classList.add('drop');
  rainContainer.appendChild(drop);
}

4. تحسين التفاعل واللمسات النهائية

لتعزيز التأثير، يمكن إضافة بعض التحسينات مثل تغيير لون القطرات مع مرور الوقت أو إضافة بعض الحركات التفاعلية التي تستجيب لحركة الفأرة.

مثال على إضافة تأثير التفاعل:

scss
CopyEdit
.drop:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.2);
}

هذا التأثير يجعل القطرات تتغير عند المرور عليها بالفأرة، مما يضفي طابعًا تفاعليًا يزيد من جذب الزوار.

5. الخاتمة

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