باستخدام المفاهيم الأساسية لـ HTML وCSS وJS، سيكون لديك مخطط زمني جذاب جاهز للعمل في وقت قصير.

الماخذ الرئيسية

  • من السهل إنشاء جدول زمني قوي باستخدام CSS وJavaScript.
  • ابدأ بتحديد بنية HTML للمخطط الزمني وتصميم عناصر المخطط الزمني باستخدام CSS.
  • استمر في إضافة الرسوم المتحركة إلى المخطط الزمني باستخدام JavaScript. يمكنك استخدام Intersection Observer API لتلاشي عناصر المخطط الزمني عند التمرير.

تعد الجداول الزمنية أدوات مرئية قوية تساعد المستخدمين على التنقل وفهم الأحداث الزمنية. اكتشف كيفية إنشاء مخطط زمني تفاعلي باستخدام الثنائي الديناميكي لـ CSS وJavaScript.

بناء هيكل الجدول الزمني

يمكنك التحقق من الكود الكامل لهذا المشروع من موقعه مستودع جيثب.

للبدء، حدد بنية HTML في Index.html. قم بإنشاء الأحداث والتواريخ كمكونات منفصلة، ​​مما يضع الأساس للمخطط الزمني التفاعلي.

<body>
<sectionclass="timeline-section">
<divclass="container">
<divclass="Timeline__header">
<h2>Timelineh2>
<pclass="heading--title">
 Here is the breakdown of the time we anticipate <br />
 using for the upcoming event.
p>
div>


<divclass="Timeline__content">
<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 1h3>







instagram viewer



<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">1span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>


<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 2h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">2span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>

div>
div>
section>
body>

في الوقت الحالي، يبدو المكون الخاص بك كما يلي:

اختر تخطيطًا لخطك الزمني: عمودي مقابل عمودي أفقي

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

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

قم بتصميم الجدول الزمني باستخدام CSS

هناك ثلاثة أنواع من العناصر المرئية التي ستقوم بتصميمها للمخطط الزمني: الخطوط والعقد وعلامات التاريخ.

  • خطوط: الخط العمودي المركزي، الذي تم إنشاؤه باستخدام Timeline__content:: بعد العنصر الزائف، يعمل بمثابة العمود الفقري للخط الزمني. تم تصميمه بعرض ولون محددين، وتم وضعه بشكل متوافق تمامًا مع مركز عناصر المخطط الزمني.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • العقد: الدوائر، المصممة باستخدام فئة الدائرة، تعمل كعقد على المخطط الزمني. يتم وضعها تمامًا في منتصف كل عنصر من عناصر المخطط الزمني وتكون مميزة بصريًا بلون الخلفية، مما يشكل النقاط الرئيسية على طول المخطط الزمني.
    .circle {
    position: absolute;
    background: var(--clr-purple);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 6.8rem;
    width: 100%;
    aspect-ratio: 1/ 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    font-size: 1.6rem;
    }
  • علامات التاريخ: تظهر التواريخ، المصممة باستخدام فئة Timeline__date، على جانبي المخطط الزمني. يتناوب موضعهم بين اليسار واليمين لكل عنصر في المخطط الزمني، مما يؤدي إلى إنشاء مظهر متدرج ومتوازن على طول المخطط الزمني.
    .Timeline__text,
    .Timeline__date { width: 50%; }
    .Timeline__item:nth-child(even) { flex-direction: row-reverse;}
    .Timeline_item:nth-child(even).Timeline_date {
    text-align: right;
    padding-right: 8.3rem;
    }
    

    .Timeline_item:nth-child(even).Timeline_text { padding-left: 8.3rem;}
    

    .Timeline_item:nth-child(odd).Timeline_text {
    text-align: right;
    align-items: flex-end;
    padding-right: 8.3rem;
    }
    .Timeline_item:nth-child(odd).Timeline_date { padding-left: 8.3rem;}

تحقق من المجموعة الكاملة من الأنماط من جيثب الريبو في style.css.

بعد التصميم، يجب أن يبدو المكون الخاص بك كما يلي:

الرسوم المتحركة مع جافا سكريبت

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

1. الإعداد الأولي

أولاً، حدد كافة العناصر ذات الفئة Timeline__item.

const timelineItems = document.querySelectorAll(".Timeline__item");

2. التصميم الأولي لعناصر الجدول الزمني

اضبط العتامة الأولية لكل عنصر على 0 (غير مرئي) وقم بتطبيق أ انتقال CSS للتلاشي السلس.

timelineItems.forEach((item) => {
 item.style.opacity = 0;
 item.style.transition = "opacity 0.6s ease-out";
}

يمكنك تعيين هذه الأنماط في ورقة الأنماط، لكن القيام بذلك قد يكون خطيرًا. إذا فشل تشغيل JavaScript، فإن هذا النهج سيجعل مخططك الزمني غير مرئي! يعد عزل هذا السلوك في ملف JavaScript مثالاً جيدًا على ذلك تحسين تدريجي.

3. رد اتصال مراقب التقاطع

حدد وظيفة FadeInOnScroll لتغيير عتامة العناصر إلى 1 (مرئية) عندما تتقاطع مع إطار العرض.

const fadeInOnScroll = (entries, observer) => {
 entries.forEach((entry) => {
if (entry.isIntersecting) {
 entry.target.style.opacity = 1;
 }
 });
};

4. خيارات مراقب التقاطع

قم بتعيين الخيارات للمراقب، مع حد 0.1 للإشارة إلى تشغيل الرسوم المتحركة عندما يكون 10% من العنصر مرئيًا.

const options = {
 root: null,
 rootMargin: "0px",
 threshold: 0.1,
}

5. إنشاء واستخدام مراقب التقاطع

أنهِ الأمر بإنشاء IntersectionObserver باستخدام هذه الخيارات وتطبيقه على كل عنصر من عناصر المخطط الزمني.

const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
 observer.observe(item);
});

يجب أن تبدو النتيجة النهائية كما يلي:

أفضل ممارسات مكونات المخطط الزمني

بعض الممارسات التي يجب الالتزام بها تشمل:

  • قم بتحسين الجدول الزمني الخاص بك ليناسب أحجام الشاشات المختلفة. تعلم تقنيات التصميم سريعة الاستجابة لضمان تجربة مستخدم سلسة عبر الأجهزة.
  • استخدم ممارسات الترميز الفعالة لضمان سلاسة الرسوم المتحركة.
  • استخدم HTML الدلاليونسب التباين المناسبة وعلامات ARIA لتحسين إمكانية الوصول.

إضفاء الحيوية على الجدول الزمني الخاص بك: رحلة في تصميم الويب

إن بناء جدول زمني تفاعلي لا يقتصر فقط على تقديم المعلومات؛ يتعلق الأمر بإنشاء تجربة جذابة وغنية بالمعلومات. من خلال الجمع بين بنية HTML وتصميم CSS ورسوم JavaScript المتحركة، يمكنك إنشاء جدول زمني يجذب انتباه جمهورك أثناء تقديم محتوى قيم.