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 !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك