no title!

يمكنك أن تقوم بذلك بعدة طرق من هذه الطرق إستخدام CSS فقط، كالتالي:

بفرض أن لدينا الكود التالي في صفحة HTML :

<div class="main" id="section1" style="height: 1000px">
  <h2>Section 1</h2>
  <p>Click on the link to see the "smooth" scrolling effect.</p>
  <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
  <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>


<div class="main" id="section2" style="height: 1000px">
  <h2>Section 2</h2>
  <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>

يمكن التنقل بين الأجزاء بإنسيابية من خلال إضافة الخاصية scroll-behavior إلى html:

html {
  scroll-behavior: smooth;
}

الآن عند الضغط على أحد الروابط سيتم الإنتقال إلى القسم الآخر من الصفحة بصورة إنسابية، وليس بشكل مباشر.

أيضًا يمكنك أن تقوم بإستخدام JavaScript و jQuery، كالتالي:

$('#section1').on('click', function(){
    // يمكنك تنفيذ بعض الأمور الأخرى هنا إن أردت
    $('html, body').animate({
        scrollTop: $("#section2").offset().top
    }, 1000);
})

يقوم الكود السابق بالإنتقال إلى #section2 عند الضغط على #section1 وذلك في ثانية واحدة (1000 ميلي ثانية)، ويمكنك أن تقوم بأي شيء قبل أو بعد الإنتقال إلى القسم الثاني أيضًا بدون مشكلة.

يمكن تطبيق ذلك باستخدام CSS + JS حيث أن الشيفرات يجب أن توضع في جميع الصفحات (صفحة بداية التأثير وصفحة عرض التأثير)

في CSS نعرف صنفين:

• لتأثير الظهور :

fadeIn تأثير الإنتقال للصفحة بشكل ease-in:

.animate-in {
    animation: fadeIn .5s ease-in;
}

• لتأثير الاختفاء:

نعدل الشفافية لتصبح 0 ليختفي العنصر

.animate-out {
    transition: opacity .5s;
    opacity: 0;
}

ثم تعريف keyframes يضبط تأثير الظهور، حيث يكون العنصر مخفي ثم يظهر

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

في جافاسكربت:

نضيف الصنف animate-in ل body ليتم تطبيقه مباشرة،

كما نضيف مستمع أحداث لما قبل هدم هذه الصفحة وتحميل الصفحة التالية beforeunload ونطبق عليه دالة مهمتها إسناد صنف الإخفاء animate-out..

document.body.classList.add("animate-in");

window.addEventListener("beforeunload", function () {
  document.body.classList.add("animate-out");
});

ضع الشيفرات في ملفين حسب نوعها وقم بتضمينهم في كل الصفحات.

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

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="الرابط الذي تريد توجيه المُستخدم إليه"

ليش محد يرد 😒