درس صنع واجهة انتظار متحركة بإستخدام CSS

1:36:00 ص
درس لتعلم صناعة واجهة انتظار متحركة بإستخدام CSS دون استخدام الجافاسكرسيبت


السلام عليكم ورحمة الله وبركاته

 سنتعلم معاً في هذا الدرس كيفية صناعة واجهة انتظار بإستخدام CSS فقط ومن دون استخدام أو كتابة  أي كود جافاسكريبت

 المهارات المتطلبة قبل البدء في الدرس:
  يتوجب أن تكون على معرفة ممتازة بكل من لغتي HTML & CSS 

 أهم خصائص CSS التي سنتعامل معها :

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

 النتيجة النهائية للدرس :
See the Pen wzZZZx by Mohammed Jaffar (@MJK) on CodePen.


 الآن دعونا نبدأ في الدرس في البداية كما تعودنا دائماً وفي كل درس سنقوم ببناء هيكلة صفحة html الخاصة بنا 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="wrapper">

        <div class="circle1">
            <div class="circle2"></div>
            <div class="circle3"></div>
        </div>

        <h1 class="loading"> يرجى الإنتظار
      <span class="dot1"> .</span>
      <span class="dot2"> .</span>
      <span class="dot3"> .</span>
    </h1>

    </div>

</body>

</html>

في الكود أعلاه قمنا أولا بإنشاء div مع كلاس(wrapper) وهي الحاوية التي ستحتوي على جميع العناصر الآخرى بداخلها
 ثانياً قمنا بعمل div مع كلاس (circle1) وسنقوم بتنسيقها بالـ CSS لنصنع منها دائرة وقمنا بداخلها بعمل حاويتين(circle2, circle3) حيث سنصنع منهما ايضاً دائرتين داخل الدائرة الأولى بالـ CSS
 ايضاً في النهاية قمنا بعمل عنصر (h1) بداخله 3(span) كل منها يحمل اسم كلاس يبدأ (dot) حيث سنستخدمها في درسنا كنقاط تظهر وتختفي واحدة تلوى الآخرى كما رأينا في النتيجة النهائية للدرس

 والنتيجة التي لدينا الآن : 

 الآن سنبدأ بكتابة اكواد CSS هيا بنا ... 
 في البداية سأقوم بإضافة الأكواد التالية :

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
html{ 
 direction: rtl;
font-family: 'Droid Arabic Kufi', sans-serif;
}
body{
    background: #009689;
    color: #fff;
}
.wrapper{
    max-width: 100%;
    height: 500px;
}
.loading{
    display: table;
     margin: 50px auto;
}

لا اعتقد بأن هذا الكود يحتاج إلى شرح
الآن نحتاج لإخفاء النقاط الثالثة التي تحمل اسم كلاس يبدأ بـ(dot) :
[class^='dot']{ opacity: 0; }

 هنا قمنا بإختيار جميع الكلاسات التي يبدأ اسمها بـ(dot)وقمنا بتغيير شفافيتها إلى 0

 الآن إن ذهبت إلى رؤية النتائج ستجد بأن النقاط الثالثة قد اختفت



 الآن سنقوم بالعمل على div الذي يحمل كلاس بإسم (circle1) وسنقوم منه بصنع دائرة بإطار متقطع والكود التالي سيقوم بالمهمة:
.circle1{
    height: 200px;
    width: 200px;
    border: 7px dotted #fff;
    border-radius: 50%;
    transition: all 1s;
    margin: 0 auto;
    margin-top: 150px;
    position: relative;
    animation: rotate360 5s infinite;
}


النتيجة : 



 لاحظ بأننا قمنا بإضافة (animation: rotate360 5s infinite;) في النهاية ولكن هذا الأنميشن لن يعمل الآن حتى نقوم بصناعته ولكننا سنؤجل صنعه قليلاً لوقت لاحق فقط عليك أن تتذكر بأننا قمنا بإضافته

 الآن بنفس الطريقة سنقوم بصنع الدائرتين الآخريين 
.circle2{
    margin:  20px auto;
    height: 150px;
    width: 150px;
    border: 5px dotted #fff;
    border-radius: 50%;
    transition: all 1s;
    animation: rotateX 5s infinite;
}

.circle3{
    height: 90px;
    width: 90px;
    background: #fff;
    border-radius: 50%;
    transition: all 1s;
    position: absolute;
    top: 55px;
    left: 55px;
    animation: lighting 5s infinite;
}

هنا كل ماقمنا به هو رسم الدائرتين وقمنا بوضعهما في منتصف الدائرة الأولى لاحظ ايضاً أننا اضفنا لك دائرة أنميشن خاص بها في النهاية

 النتيجة :


 الآن دعونا نبدأ في صنع الأنميشن الخاص بنا وهي الخطوة الأهم في هذا الدرس
 أولا سنقوم بإظهار النقاط التي كانت بعد كلمة (يرجى الإنتظار) والتي أخفيناها سابقاً 
سنقوم بإظهارها واحدة تلوى الآخرى بالترتيب لفعل ذلك سنحتاج العمل على (@keyframes) 
سنقوم أولاً بصناعة keyframes وسنقوم بتسميته (dot1) والذي سيكون خاص بإظهار النقطة الأولى فقط كما في التالي : 

@keyframes dot1{
    0%{ opacity: 0; }
    20%{ opacity: 0; }
    30%{ opacity: 1; }
    100%{ opacity: 1; }
}

هنا قمنا بجعل الشفافية كما هي 0 في بداية بدأ عمل الأنميشن و وحتى 20% من وقت عمل الأنميشن والذي سنحدده بعد قليل ،
 وبعدها ستبدأ النقطة في الظهور شيئاً فشيئاً حتى تظهر بالكامل بعد 30% من مدة عمل الأنميشن وستبقى ظاهرة حتى نهاية وقت الأنميشن الآن سنحتاج لتشغيل هذا الإنميشن على النقطة الآولى ولذلك سنقوم باختيار النقطة التي تحمل div بإسم (dot1) وسنقوم بتشغيل الأنميشن كما في التالي :
 .dot1{ animation: dot1 5s infinite; } 

 كما ترى هنا قمنا بإختيار اسم الأنميشن (dot1) والذي صنعناه سابقاً وجعلنا المدة الزمنية لعمل هذا الأنميشن 5 ثواني وعدد مرات عمل الأنميشن لا نهائي أي سيتمر بالعمل إلى ما لا نهاية سيبدأ بالعمل لمدة 5 ثواني ثم سينتهي وثم سيبدأ مرة اخرى وهكذا
 الآن إن ذهب ورأيت النتيجة ستجد بأن النقطة ستبدأ بالظهور ثم بالإختفاء كل 5 ثواني
 الآن كل ما نحن بحاجة إليه هو أن نفعل نفس الأمر مع النقطتين الأخريين  سنقوم بعمل أنميشن خاص لكل نقطة تحدد مدة ظهورها واختفائها كما في التالي : 
@keyframes dot2{
    0{ opacity: 0; }
    40%{ opacity: 0; }
    60%{ opacity: 1; }
    100%{ opacity: 1; }
}
@keyframes dot3{
    0%{ opacity: 0; }
    60%{ opacity: 0; }
    90%{ opacity: 1; }
    100%{ opacity: 1; }
}

كما ترى بتكرار نفس العمل الذي قمنا به مع النقطة الأولى الفرق فقط هو التحكم في مدة ظهور واختفاء النقاط وبنفس الطريقة سنقوم بتشغيل هذا الأنميشن لك نقطة بإضافة الكود التالي : 

.dot2{ animation: dot2 5s infinite; }
.dot3{ animation: dot3 5s infinite; }

إذاً قمنا بتكرار نفس الخطوات كما فعلنا مع النقطة الأولى
 الآن اذهب وألقي نظرة على نتيجة العمل

 ما رأيك؟ جميل جداً أليس كذلك؟

 لا بد بأنك شاهدت كيف تخرج النقاط الواحدة تلوى الآخرى بشكل متتالي ولا متناهي وهذه هي النتيجة الذي كنا نريدها 

 حالياً انتهينا من جزئية النقاط وسنتوجه مباشرة للعمل على جزئية الدوائر الذي قمنا بصناعتها سابقاً 
 في البداية سنقوم بعمل دوران للدائرة الأولى 360 درجة بشكل متكرر ولا متناهي
 إذا سنقوم بعمل أنميشن خاص بها كما فعلنا مع النقاط بإستخدام keyframes سنقوم بصناعة أنميشن بإسم (rotate360) كما في التالي : 
@keyframes rotate360{
    0{ transform: rotate(0) }
    100% { transform: rotate(360deg) }
}

هنا قمنا بعمل حركة دوران من 0 إلى 360 درجة
 الآن إن كنت تتذكر فقد أضفنا هذا الأنميشن سابقاً للدائرة الأولى والتي تحمل كلاس بإسم(circle1) كما أننا اضفنا لكل دائرة انميشن خاص بها
 سنقوم بصنعهم بدأ من الآن
 الآن إن ذهبت وألقيت نظرة على النتيجة سترى بأن الدائرة تقوم بالدوران بشكل لا نهائي ليس فقط الدائرة الأولى بل جميع الدوائر الأخرى تدور ايضاً وهذا بسبب أن الدائرتين تتواجدان في الأساس داخل الدائرة الأولى فعندما تدور الدائر الإساسية تدور معها الدوائر الأخرى
 الآن سنتجه للعمل على الدائرة الثانية ونجلها تدور ايضاً 
ولكن هذه المرة سنجعلها تدور بشكل افقي لـ 60 درجة فقط ثم تعود 


@keyframes rotateX{



    0{ transform: rotateX(0) }



    60% { transform: rotateX(45deg)}



    100% { transform: rotateX(0)}



}

 وبما أننا اضفنا الإنميشن للكلاس (circle2) سابقاً سنذهب مباشرةً ونرى النتيجة
 جميل جداً اليس كذلك ؟
 الآن كخطوة أخيرة سنقوم بجعل الكرة الصغيرة والتي في المنتصف تضيء وبنفس الطريقة وباستخدام (keyframes) سنقوم بالتلاعب بشفافية الدائرة كما في التالي : 
@keyframes lighting{
    0{ opacity: 1 }
    20% { opacity: 1}
    30% { opacity: .25}
    40% { opacity: 1}
    50% { opacity: .25}
    60% { opacity: 1}
    70% { opacity: .25}
    80% { opacity: 1}
    1000% { opacity: 1}
}
وكما تعلم فإننا قمنا بإضافة هذا الإنميشن سابقاً للكلاس (circle3)
 والآن إن ذهبنا والقينا نظرة للنتجة ستظهر لنا النتيجة النهائية كما في التالي :

See the Pen wzZZZx by Mohammed Jaffar (@MJK) on CodePen.

 إن كانت لديك نفس النتيجة فمبارك عليك لقد اكملت الدرس بنجاح
 أما إذا اكنت النتيجة التي لديك مختلفة فحاول مراجعة الدرس مرة اخرى واكتشاف الأخطاء

 وفي الختام إن كنت ترى بأن هذا الدرس قدم لك فائدة فقم بدعمنا ونشر الدرس بين أهلك وأصدقائك والمواقع الإجتماعية لتعم الفائدة للجميع

 دمتم في حفظ الله ورعايته وإلى اللقاء

ليست هناك تعليقات

المقالات الاكثر مشاهدة

قالب هاش تك 2016 © - منتج إبداعي طور بواسطة حيّاك