تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب (تعلم بروقااان👌)
كيفية الشراء من الموقع

منطقة إعلانية

يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك

سعر الإعلان 3$ فى اليوم الواحد

1- مراجعة

فى هذا الفيديو سيتم :

  1. مراجعة على css animation
  2. شرح animation-timing-function للتحكم فى سرعة العنصر
    وسوف نختار linear حتى يتحرك العنصر بنفس السرعة من البداية الى النهاية
  3. شرح animation-fill-mode للتحكم فى المكان النهائى للعنصر
    وسوف نختار forwards حتى يبقى العنصر فى الحالة النهائية ولا يعود الى الحالة الابتدائية

الملفات المُستخدمة فى الفيديو

2- javascript congratulations animation

أهم الملاحظات الموجودة فى الفيديو :

  1. يجب ان تعرف الفرف بين :
    const heart1=document.createElement("div")
    وبين
    const heart2=`<div> </div>`

    heart1 : هو عبارة عن html element
    heart2 : هو عبارة عن string
  2. العنصر الـ fixed يكون :
  • خرج من الترتيب المنطقي له وان العنصر الذي يليه في ملف ال html سوف يحل محله
  • العنصر يكون ثابت بالنسبة لحدود الصفحة حتى لو عملت scroll
  • عرض العنصر يتحدد على حسب المُحتوي الذي بداخلة

الملفات المُستخدمة فى الفيديو

3- javascript heart animation

أهم الملاحظات الموجودة فى الفيديو :

أن هذه الأكواد :

animation-name: fall;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;

يُمكن إختصارها كالتالى :

animation: fall 1s 1 linear forwards;

الملفات المُستخدمة فى الفيديو

4- Reuseable function

JavaScript function is a block of code designed to perform a particular task

الــ function هى عبارة عن مجموعة من الأكواد تقوم بتنفيذ مُهمة مُعينة

الملفات المُستخدمة فى الفيديو

😡
انت مشغل الـ AdBlock !!

يعنى انت مش مُنتسب فى القناة ولا مُشترك فى كورس يوديمى وكمان مشغل الأدبلوك فى الموقع !! 😢