באמצעות המושגים הבסיסיים של HTML, CSS ו-JS, יהיה לך ציר זמן אטרקטיבי ופועל תוך זמן קצר.

טייק אווי מפתח

  • קל לבנות ציר זמן רב עוצמה באמצעות CSS ו-JavaScript.
  • התחל בתיאור מבנה ה-HTML של ציר הזמן ועיצוב רכיבי ציר הזמן עם CSS.
  • המשך להוסיף אנימציה לציר הזמן באמצעות JavaScript. אתה יכול להשתמש בממשק ה-API של Intersection Observer כדי לדעוך פריטי ציר זמן בגלילה.

קווי זמן הם כלים חזותיים רבי עוצמה המסייעים למשתמשים לנווט ולהבין אירועים כרונולוגיים. גלה כיצד ליצור ציר זמן אינטראקטיבי באמצעות הצמד הדינמי של CSS ו-JavaScript.

בניית מבנה ציר הזמן

אתה יכול לבדוק את הקוד המלא של הפרויקט הזה מהקוד שלו מאגר GitHub.

כדי להתחיל, תאר את מבנה ה-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:: לאחר pseudo-element, משמש כעמוד השדרה של ציר הזמן. הוא מעוצב עם רוחב וצבע ספציפיים, ממוקם באופן מוחלט כדי ליישר קו עם מרכז פריטי ציר הזמן.
    .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;}

בדוק את הסט המלא של סגנונות מה- ריפו של GitHub נכנס style.css.

לאחר העיצוב, הרכיב שלך צריך להיראות כך:

אנימציה עם JavaScript

כדי להנפיש רכיב זה, השתמש ה-API של Intersection Observer להנפשת פריטי ציר זמן בגלילה. הוסף את הקוד הבא ל 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. התקשרות חוזרת לצומת Observer

הגדר פונקציית 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. יצירה ושימוש ב-Intersection Observer

סיים על ידי יצירת IntersectionObserver עם אפשרויות אלה והחלתו על כל פריט ציר זמן.

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

התוצאה הסופית אמורה להיראות כך:

שיטות מומלצות לרכיב ציר הזמן

כמה שיטות עבודה שכדאי להקפיד עליהן כוללות:

  • בצע אופטימיזציה של ציר הזמן שלך עבור גדלי מסך שונים. למד טכניקות עיצוב רספונסיבי כדי להבטיח חווית משתמש חלקה במכשירים שונים.
  • השתמש בשיטות קידוד יעילות כדי להבטיח אנימציות חלקות.
  • השתמש ב-HTML סמנטי, יחסי ניגודיות נכונים ותוויות ARIA עבור נגישות טובה יותר.

הבאת חיים לציר הזמן שלך: מסע בעיצוב אתרים

בניית ציר זמן אינטראקטיבי אינה רק הצגת מידע; מדובר ביצירת חוויה מרתקת ואינפורמטיבית. על ידי שילוב של מבנה HTML, סגנון CSS והנפשות JavaScript, אתה יכול ליצור ציר זמן שמושך את הקהל שלך תוך אספקת תוכן בעל ערך.