السلام عليكم

شباب كيف اقوم بالحركة اتالية :

عندما اقوم بالنقر فوق كلمة الapout مثلاً ,في الheader سيقوم ببعض الاوامر بنقلي الى قسم الapout في الصفحة .

كيف اجعل هذه العملية تتم بشكل تدريجي اي لا اريد الانتقال مباشرةً

كما لو اني اضفت بعض الترانسيشن

💖


يمكنك تنفيذ ذلك بإستخدام الجافاسكريبت بالشكل التالي

  1. نقوم بإنشاء class في ملف الcss يحمل خاصية الanimation وتقوم بتحديد الanimation المرغوب بداخله
  2. نقوم بإضافة حدث onclick على عنصر الabout
  3. في دالة الحدث نقوم بعمل دالة setTimeOut تبدأ بعد إنتهاء وقت الanimation
  4. وفي دالة الsetTimeOut نقوم بتحويل المُستخدم إلى رابط صفحة الabout

طريقة إستخدام الanimation ستجدها موضحة في موثوقة حسوب عبر الرابط التالي

طريقة إستخدام الحدث onclick تكون عبر التالي, اولاً وضع اسم الدالة في الخاصية في الوسم

<a onclick="animate"></a>

ومن ثم ننشئ الدالة التي تستقبل الحدث والتي حددنا أن إسمها animate , ونقوم بإضافتها في ملف الجافاسكريبت

function animate(e){
//اكتب شفرتك البرمجية هنا
}

وبالنسبة للدالة setTimeOut يتم إستخدامها بالشكل التالي

setTimeOut(function,delay)

حيث تقوم بوضع الدالة المُراد تنفيذها بدل المُعامل function وتقوم بوضع المدة التي تريد تنفيذ الشفرة بعدها في المُعامل delat

وتحويل المُستخدم يتم بواسطة الجافاسكريبت عبر الدالة

window.href="الرابط الذي تريد توجيه المُستخدم إليه"