1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
  2. الملاحظات
    عزيزي زائر تم اطلاق الموقع الرسمي لبرنامج الاختراق Spy-Note
    إستبعاد الملاحظة
  1. Read Onymus
    rank
    Developer

    عضو منذ:
    ‏27 أغسطس 2012
    عدد المشاركات:
    40
    الإعجابات المتلقاة:
    7
    نقاط الجائزة:
    30
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    Perl
    [​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]
     
    أعجب بهذه المشاركة Mohmaed
    جاري تحميل الصفحة...
  2. Mira Mrmr .::|| زهره منتدى عراق تيم ||::.
    V • I • P

    عضو منذ:
    ‏9 يوليو 2015
    عدد المشاركات:
    644
    الإعجابات المتلقاة:
    133
    نقاط الجائزة:
    105
    الجنس:
    أنثى
    الإقامة:
    Baghdad
    نظام التشغيل:
    windows 8.1
    Facebook:
    YouTube:
    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

    عاشت ايدك
     
  3. -AL SenatoOoR-
    V • I • P

    عضو منذ:
    ‏14 أغسطس 2014
    عدد المشاركات:
    741
    الإعجابات المتلقاة:
    35
    نقاط الجائزة:
    435
    الجنس:
    ذكر
    الإقامة:
    [[ الـــعرآق الــــعظيم ]]
    نظام التشغيل:
    windows 7
    اللغة البرمجية:
    Visual Basic
    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

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

     
  4. Gaza-Dz
    مراقب عآم

    عضو منذ:
    ‏26 مايو 2013
    عدد المشاركات:
    1,630
    الإعجابات المتلقاة:
    109
    نقاط الجائزة:
    505
    الجنس:
    ذكر
    الوظيفة:
    DZ
    الإقامة:
    DZ
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    Visual Basic
    Facebook:
    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

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


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

    عضو منذ:
    ‏24 أغسطس 2015
    عدد المشاركات:
    140
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    40
    نظام التشغيل:
    windows 8
    اللغة البرمجية:
    Visual Basic
    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

    مبدع+استمر
     
  6. باسم الموسوي
    Developer

    عضو منذ:
    ‏27 يوليو 2014
    عدد المشاركات:
    125
    الإعجابات المتلقاة:
    26
    نقاط الجائزة:
    50
    الجنس:
    ذكر
    الوظيفة:
    طالب
    الإقامة:
    العراق - النجف الأشرف
    نظام التشغيل:
    windows 7
    اللغة البرمجية:
    Java
    Facebook:
    YouTube:
  7. Mohmaed اداري شؤون الاعضاء
    طاقم الإدارة

    عضو منذ:
    ‏12 ابريل 2015
    عدد المشاركات:
    821
    الإعجابات المتلقاة:
    727
    نقاط الجائزة:
    515
    الإقامة:
    IRAQ
    نظام التشغيل:
    wifite
    اللغة البرمجية:
    Visual Basic
  8. Security ALqassem قراصنة القاسم
    Developer

    عضو منذ:
    ‏7 سبتمبر 2015
    عدد المشاركات:
    133
    الإعجابات المتلقاة:
    35
    نقاط الجائزة:
    75
    الجنس:
    ذكر
    نظام التشغيل:
    windows 7
    اللغة البرمجية:
    Visual Basic

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

جاري تحميل الصفحة...