1. Read Onymus

    Read Onymus Developer

    الأنتساب:
    ‏27 أغسطس 2012
    المشاركات:
    41
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    8
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    [​IMG]

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

    اخواني اصدقائي معاكم اخوكم عبد الرحمن العتيبي

    [​IMG]
    اليوم بأذن الله تعالى اطرح لكم درس جميل وصغير وسهل

    في عالم css

    الموضوع مشابه نوع ما الى درسي السابق

    درس عمل صفحه تحميل - CSS Spinners
    [​IMG]

    وضع صورة ساكنة وتحريكها عبر CSS

    سنغشي كامل الصفحة بصندوق شبه شفاف

    (من أول اليسار إلى أول اليمين ومن أول الأعلى إلى أول الأسف وهذه طريقة لوصف المكان والعرض والطول معا)

    ونريده أن يظل في وجهك إن صعدت أو نزلت (الموقع الثابت fixed) ونجعل ما يفيض من الصفحة مخفي.

    [HTML CODE]<div id="overlay-blocker" style="background:rgba(255,255,255,0.5);position:fixed;left:0;right:0;top:0;bottom:0;">
    </div>[/HTML CODE]

    هذا سيمنع المستخدم من النقر على مكونات الصفحة أثناء التحميل.

    ونضع فيه صورة ثابتة في وسط الصفحة (50% لليمين والأعلى)

    ونستخدم الهوامش السالبة لتوسيطها (سالب نصف العرض وسالب نصف الطول) ثم سندورها

    [HTML CODE]<div id="overlay-blocker" style="position:fixed;left:0;right:0;top:0;bottom:0;">
    <img class="ani-spin" src="spinner.gif" style="position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;" />
    </div>[/HTML CODE]

    يفضل أن تكون الصورة من لون واحد (حول الصورة إلى ألوان مفهرسة indexed color ثم تأكد من أنها لاتحتوي إلا على لون واحد)

    ويمكنك استعمال الأساس 64 للتخلص من الصورة كليا.

    والآن لنحركها باستعمال CSS3 وهو جزئين الأول تعرف فيه الحركة بأن تقول ماذا يحدث

    (من تحولات transformations في كل مرحلة مثل التدوير والتحريك والتكبير)

    في كل مرحله من مراحل تقدم الزمن (كنسبة مئوية) وتعطيه اسمها مثلا spin هكذا

    [CSS]@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
    }[/CSS]

    ثم تربط هذا بمحددة CSS وتبين المدة الزمنية والتكرار وطريقة سير الزمن (خطي أو متسارع مثلا) هكذا

    [CSS].ani-spin {
    animation: spin 1s infinite linear;
    }[/CSS]

    لكن عليك تكرار الجزئين السابقين لكل المتصفحات فيصبح لديك هذا المثال

    انقر على الزر البد وهو يضيف الفئة loading إلى body ولاحظ النتيجة

    (حرك الشاشة قبل الضغط على الزر كذلك غير حجمها ولاحظ أنها دائما في الوسط)

    [​IMG]

    يمكننا أن نجرب حركات أخرى مثل التكبير والتصغير هكذا

    [​IMG]

    رقعة الرسم canvas

    يستخدم وسم رقعة الرسم canvas في الرسم على المتصحف عبر جافاسكربت.

    نحجز مكان للرسم ونعطيه معرف فريد id ثم في ذيل ملف HTML نضع كود جافاسكربت

    الذي يرسم على الرقعة. يمكنني أن أرسم 13 خطا في دائرة ونحركها بنفس الطريقة السابقة

    الطريقة باختصار نرسم "المسار" بأن نحرك القلم للمكان المطلوب عبر دالة moveTo ثم ننزل القلم ونرسم

    خط عبر دالة lineTo. وطبعا قبل بدء المسار نستعمل الدالة beginPath وعندما ننتهي

    من المسار نأمره بأن يخط المسار عبر stoke أو يملؤه fill أو كلاهما.

    طبعا يلزمني استخدام الدوال المثلثية جاس و جتاس لأعرف موقع النقطة في كل زاوية. إليك الكود والنتيجة

    [JS]function spinner(r0, r1, w, n){
    var el=document.getElementById("c1");
    var c=el.getContext("2d");
    var i, a, delta=2.0*Math.PI/n;
    c.strokeStyle="rgba(127,127,127,0.5)";
    c.lineWidth=w;
    c.beginPath();
    for(i=0,a=0.0;i<n;++i) {
    c.moveTo(r0+r1*Math.cos(a), r0+r1*Math.sin(a));
    c.lineTo(r0+r0*Math.cos(a), r0+r0*Math.sin(a));
    a+=delta;
    }
    c.stroke();
    };
    spinner(32, 20, 6, 13);[/JS]


    يمكننا أن نجعلها مسنن كما في هذا المثال

    ويمكننا أن نجعلها متدرجة في الشفافية كما في هذا المثال

    ما رأيكم أن نجرب فكرة أخرى وهي أن نرسم دائرة رمادية شبه شفافة ونصف دائرة بيضاء وأخرى سوداء

    وكلاهما نصف شفافة ونحرك (عبر CSS3) واحدة مع عقارب الساعة والثانية عكسها هكذا:

    [JS]function spinner(r, w){
    var el=document.getElementById("c1");
    var c=el.getContext("2d"), r1=r-w/2;
    c.beginPath();
    c.arc(r, r, r1, 0, 2*Math.PI);
    c.strokeStyle="rgba(127,127,127,0.5)";
    c.lineWidth=w;
    c.stroke();
    el=document.getElementById("c2");
    c=el.getContext("2d");
    c.beginPath();
    c.arc(r, r, r1, 0, Math.PI);
    c.strokeStyle="rgba(255,255,255,0.5)";
    c.lineWidth=w;
    c.stroke();
    el=document.getElementById("c3");
    c=el.getContext("2d");
    c.beginPath();
    c.arc(r, r, r1, Math.PI, 2*Math.PI);
    c.strokeStyle="rgba(0,0,0,0.5)";
    c.lineWidth=w;
    c.stroke();
    };
    spinner(32, 6);[/JS]

    ومع بعض التعديل يمكننا عمل واحد آخر هكذا

    [​IMG]

    الى هنا اكتفي بهذه الامثله البسيطه

    لنا عوده اخرى ان شاء الله

    [​IMG]
     
  2. Mira

    Mira .::|| Tale of Remorse ||::. مشرفات المنتدى

    الأنتساب:
    ‏9 يوليو 2015
    المشاركات:
    657
    الإعجابات المتلقاة:
    119
    نقاط الجائزة:
    43
    الجنس:
    أنثى
    الإقامة:
    Baghdad
    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

    عاشت ايدك
     
  3. -AL SenatoOoR-

    -AL SenatoOoR- V • I • P

    الأنتساب:
    ‏14 أغسطس 2014
    المشاركات:
    803
    الإعجابات المتلقاة:
    29
    نقاط الجائزة:
    28
    الجنس:
    ذكر
    الإقامة:
    [[ الـــعرآق الــــعظيم ]]
    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

    انت ايش . . .؟
    ماشاء الله عليك مبدع
    ومواضيعك جميلة ومفهومة ومفيدة
    جزاك الله خير . . . .
    [​IMG]

     
  4. Gaza-Dz

    Gaza-Dz Support - Iq-Team

    الأنتساب:
    ‏26 مايو 2013
    المشاركات:
    1,823
    الإعجابات المتلقاة:
    89
    نقاط الجائزة:
    48
    الجنس:
    ذكر
    الوظيفة:
    DZ
    الإقامة:
    DZ
    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

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


    بوركت اخي عبد الرحمن حفظك الله ورعاك علي الشرح الجميل
    واصل معنا دوما بمتابعة شروحات الموفقة
    +
    تم القيام بالواجب
     
  5. آرْ بْيْ جْيْ ڪْرْڪْوْڪْ

    آرْ بْيْ جْيْ ڪْرْڪْوْڪْ DeveloPer Plus

    الأنتساب:
    ‏24 أغسطس 2015
    المشاركات:
    147
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    16
    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

    مبدع+استمر
     

مشاركة هذه الصفحة