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

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

يُمكن استعراض مثال كامل لفكرة الدرس على موقع CodePen مع الشيفرة الخاصّة به.

المعالج التمهيدي (Preprocessor)

سيتمّ أوّلًا وقبل كل شيء توضيح لماذا سيتمّ استخدام تقنيتي HAML/SASS بدلًا من الزوج الشائع HTML/CSS، ومع العلم أنّهما يتمتعان بالعديد من المزايا والتسهيلات ولكن السبب في الحاجة إلى معالجات تمهيديّة هنا هو أنها تسمح للمطوّر باستخدام المُتغيّرات، إنشاء حلقات تكراريّة (loops)، وتوليد قيم عشوائيّة، وبذلك لن يتمّ التعامل مع المئات من قطرات المطر بشكل منفصل بل سيتمّ إنشاؤها برمجيًّا.

يُمكن الاستزادة حول الإعداد الأوّلي والصياغة (syntax) من خلال زيارة موقع كل تقنيّة سواءً SCSS أو HAML، أو من المُمكن مبدئيًّا تطبيق الدرس على موقع CodePen، من خلال إنشاء pen جديد واختيار SCSS كمُعالج تمهيدي لـِ CSS و HAML من أجل HTML.

إنشاء النافذة

ستكون الخطوة الأولى هي عرض النافذة نفسها.

.container .window 
// صورة الخلفية
$image: 'http://i.imgur.com/xQdYC7x.jpg'; 

// عرض وطول الحاوية 
$width:100vw; 
$height:100vh; 

.container{ 
    position:relative; 
    width:$width; 
    height:$height; 
    overflow:hidden; } 
.window{ 
    position:absolute; 
    width:$width; 
    height:$height; 
    background:url($image); 
    background-size:cover; 
    background-position:50%; 
    filter:blur(10px); }

تمّ في الشيفرة السابقة وبكل بساطة رسم div مع صورة خلفيّة (background image)، وتطبيق مُرشح غشاوة (blur) عليها لكي تُصبح القطرات جليّة أكثر للناظر.

يُلاحظ كيف أنّه تمّ تخزين مسار (URL) صورة الخلفيّة في مُتغيّر image$، وذلك لأنه سيتمّ استخدام ذات الصورة للقطرات نفسها كما سيتّضح ذلك فيما بعد.

قطرات المطر في الطبيعة

سيتمّ إلقاء نظرة على القطرة وكيف تبدو في الحياة الطبيعيّة قبل الشروع في تطبيق التأثير.

يعود مصدر الصورة إلى موسوعة ويكيبيديا.

ستَقلب القطرة الصورة الّتي خلفها بمقتضى انكسار الضوء، كما سيكون للقطرة حدودًا (border) سوداء عندما يكون شكلها نصف كرويّ كامل أو غير كامل.

إنشاء قطرات المطر (Raindrops)

سيتمّ في الخطوة التّالية إنشاء قطرة مطر واحدة بعد أن تمّ معرفة الأساسيات.

.container .window .raindrop $drop-width:15px; 
// قطرات المطر لن تكون دائرية تماما لذلك سنقوم بتمديدها قليلا 
// حتى لا تتمدد الخلفية أيضا transform:scale لن نستخدم
$drop-stretch:1.1; 
$drop-height:$drop-width*$drop-stretch; 
.raindrop{ 
    position:absolute; 
    top:$height/2; 
    left:$width/2; 
    width:$drop-width; 
    height:$drop-height; 
    // border-radius:100% بدلا من border-radius:100px, حتى يكون شكل قطرات المطر بيضاوي وليس كبسولي
    border-radius:100%; 
    background-image:url($image); 
    background-size:$width*0.05 $height*0.05; 
    transform:rotate(180deg); }

ما تمّ عمله في الشيفرة السابقة هو رسم div على شكل إهليلجي (بيضاوي)، وتطبيق صورة خلفيّة (background image) داخله، وهي نفس الصورة المُستخدمة سابقًا، وبعد ذلك تم تقليص حجم الخلفيّة ومن ثم قلب القطرة رأسًا على عقب.

سيتمّ الآن إضافة حدودًا حول القطرة، لتبدو القطرة وكأن لها حجمًا.

... 
.border .raindrop 
... 
.border{ 
    position:absolute; 
    top:$height/2; 
    left:$width/2; 
    margin-left:2px; 
    margin-top:1px; 
    width:$drop-width - 4; 
    height:$drop-height; 
    border-radius:100%; 
    box-shadow:0 0 0 2px rgba(0,0,0,0.6); }

يُلاحظ كيف أنّه لم يتمّ إضافة حدودًا كاملة حول القطرة، بل التعديل على مكانها والضغط على جانبيها قليلًا لتبدو أقرب إلى القطرة الطبيعيّة.

سيتمّ في الخطوة التّالية إضافة المئات من هذه القطرات وذلك بعد الانتهاء من استكمال رسم القطرة الأولى على أكمل وجه.

... 
.raindrops .borders - (1..100).each do .border .drops - (1..100).each do .raindrop

إن الشيفرة السابقة ما هي إلا شيفرة HAML في صياغة حلقة تكرار (loop)، فكل ما تمّ عمله هو إضافة مئة كائن من raindrop.و مثلها للكائن border.

سيتمّ إلقاء نظرة مُفصّلة على شيفرة SASS بما أنّها مُحيّرة بعض الشيء.

سيتمّ بدايةً إنشاء الحلقة التكراريّة (loop) ومن ثُمّ اختيار كل عنصر (element) بشكل منفصل:

@for $i from 1 through 100{ 
    .raindrop:nth-child(#{$i}){ } 
    .border:nth-child(#{$i}){ } 
}

سيتمّ الآن توليد وتطبيق تَمَوْضُعات (positions) وأحجام عشوائية لقطرات المطر:

@for $i from 1 through 200{ 
    //توليد رقم عشوائي من 0 إلى 1 لإختيار التموضع 
    $x:random(); 
    $y:random(); 
    // إختيار حجم وتمديد قطرة المطر عشوائيا 
    // بما أن لكل قطرة مطر حجم مختلف، سنقوم بحساباتنا هنا
    .raindrop selector $drop-width:5px+random(11); 
    $drop-stretch:0.7+(random()*0.5); 
    $drop-height:$drop-width*$drop-stretch; 
    .raindrop:nth-child(#{$i}){ 
        // ضرب قيمة الموضع العشوائي في حجم الحاوية
        left:$x * $width; 
        top:$x * $height; 
        width:$drop-width; 
        height:$drop-height; 
    } 
    .border:nth-child(#{$i}){ 
        // سنقوم بنفس الشيء لحدود القطرة 
        left:$x * $width; 
        top:$x * $height; 
        width:$drop-width - 4; 
        height:$drop-height; 
    } 
}

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

... 
.raindrop:nth-child(#{$i}){ 
    ... 
    background-position:percentage($x) percentage($y); 
} 
...

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

يُمكن الوصول إلى النسخة النهائيّة للمثال بجانب الشيفرة بشكلها النهائي من خلال موقع CodePen.

ترجمة وبتصرّف للمقال CSS-Only Raindrops on Window Effect لصاحبه Lucas Bebber.