ماهي الاضافت التي ممكن تحسن من موقع

يمكنك إستخدام مكتبة AOS لإضافة animation للموقع وجعل شكله أفضل وجذاب .

يمكنك إضافة نموذج بداخل modal مثلا عند الضعط على زر Contact Me يظهر به النموذج وفيه بيانات الطبيب أو نموذج يتم إرساله لحجز الموعد.

يمكنك إضافة قسم للتقيمات وأراء العملاء وتجعل المستخدمين يقيمون الخدمة.

الموقع بسيط لهذا لا توجد إضافات كثيرة يمكنك العمل عليها .

لم افهم ماهي AOS

بتاريخ 4 دقائق مضت قال Hxfhf Ucicic:

لم افهم ماهي AOS

هي مكتبة في جافاسكريبت تضيف تأثيرات على العناصر وجعلها تتحرك بشكل جذاب . يمكنك البحث في جوجل عن AOS وستجد رابط الموقع الخاص بتلك المكتبة مع أمثلة لها يمكنك إستخدامها إذا أردت.

دخلت على اول موقع وظهر هذا 

كيف يمكن تنزيل المكتبة في مشروع react

بتاريخ 3 دقائق مضت قال Hxfhf Ucicic:

دخلت على اول موقع وظهر هذا 

نعم هذه هي المكتبة يمكنك التمرير إلى الأسفل والضعط على github للذهاب إلى مستودع المكتبة ورؤية الأمثلة الخاصة بها وكيفية تثبيتها وإستخدامها

في الموقع الذي في الصورة هذا ما تقوم به المكتبة عن التمرير لأسفل.

كيف يمكن تنزيل المكتبة في مشروع react

حسناً قمت بتنزيل المكتبة لكن كيف يمكن استخدامها في مكونات رياكت

بتاريخ 3 ساعة قال Hxfhf Ucicic:

 

كيف يمكن تنزيل المكتبة في مشروع react

حسناً قمت بتنزيل المكتبة لكن كيف يمكن استخدامها في مكونات رياكت

بعد التثبيت ستحتاج إلى استيراد المكتبة ، وأفضل مكان لتهيئة المكتبة هو في المكون الرئيسي لمشروعك App.js أو أيًا يكن اسمه، بحيث يتم تشغيلها مرة واحدة فقط عند تحميل التطبيق.

import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css'; 

ثم تهيئة المكتبة في App.js من خلال خُطاف useEffect:

  useEffect(() => {
    AOS.init({
      duration: 1200, 
    });
  }, []);

بعد ذلك كل ما عليك فعله هو إضافة السمة data-aos إلى أي عنصر JSX تريد تحريكه، وتستطيع اختيار نوع الحركة التي تريدها من موقع AOS الرسمي.

      <div className="section" data-aos="fade-up">
        <h2> العنصر سيظهر بتأثير (fade-up)</h2>
        <p>أهلاً بالعالم</p>
      </div>