طراحی تایم‌لاین با CSS — راهنمای جامع

تایم‌لاین (Timeline) یا خط زمان یک الگوی رابط کاربری کاربردی برای نمایش رویدادها به ترتیب زمانی است. از نمونه‌های رایج می‌توان به صفحات تاریخچه شرکت، نقشه راه محصول، یا لیست وقایع آموزشی اشاره کرد. در این مقاله به شیوه‌های طراحی تایم‌لاین با CSS، الگوهای رایج، نمونه‌های عملی و نکات بهینه‌سازی و دسترس‌پذیری می‌پردازیم.

انواع تایم‌لاین و انتخاب مناسب

• تایم‌لاین عمودی: مناسب برای محتوای طولانی و نمایش مرحله به مرحله؛ اغلب در صفحات بیوگرافی یا تاریخچه استفاده می‌شود.
• تایم‌لاین افقی: مناسب برای مرور سریع مراحل یا رویدادها؛ وقتی فضای افقی کافی باشد کاربردی است.
• تایم‌لاین مرکزی (centered): خط زمان در وسط صفحه قرار می‌گیرد و آیتم‌ها به صورت متناوب در دو طرف نمایش داده می‌شوند؛ برای جلوه بصری جذاب مناسب است.

مثال پایه — تایم‌لاین عمودی ساده

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <h4>شروع پروژه</h4>
      <p>ژانویه 2024 — تعیین نیازمندی‌ها</p>
    </div>
  </div>
  <!-- itemهای بیشتر -->
</div>

/* CSS */.timeline{ position:relative; padding:2rem 0 2rem 2.5rem; }
.timeline:before{ content:""; position:absolute; left:1rem; top:0; bottom:0; width:2px; background:#e0e0e0; }
.timeline-item{ position:relative; margin-bottom:2rem; }
.timeline-dot{ position:absolute; left: calc(1rem - 7px); width:14px; height:14px; border-radius:50%; background:#2b8cff; border:3px solid #fff; box-shadow:0 0 0 4px rgba(43,140,255,0.12); }
.timeline-content{ margin-left:2.5rem; background:#fff; padding:1rem; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }

توضیح: در این مثال، کل تایم‌لاین ظرفیتی به صورت نسبی دارد و ستون عمودی با ::before ساخته شده. هر آیتم یک دات (نقطه) دارد و محتوا در سمت راست قرار می‌گیرد. این ساختار ساده، پایه‌ای برای افزودن آیکون، تاریخ، یا انیمیشن است.

بهبود برای واکنش‌گرایی و نگهداری (CSS Variables)

:root{
  --line-color: #e0e0e0;
  --accent: #2b8cff;
  --dot-size: 14px;
  --gap: 2rem;
}
.timeline{ position:relative; padding:var(--gap) 0 0 calc(var(--dot-size) + 1.5rem); }
.timeline:before{ content:""; position:absolute; left:calc(var(--dot-size) / 2); top:0; bottom:0; width:2px; background:var(--line-color); }
@media (max-width:600px){
  .timeline{ padding-left:1.2rem; }
  .timeline-content{ margin-left: calc(var(--dot-size) + 0.8rem); padding:0.8rem; }
}

توضیح: استفاده از متغیرهای CSS باعث انعطاف در تغییر رنگ، اندازه و فاصله می‌شود. در مدیا کوئری عرض‌های کوچک، فاصله‌ها کاهش یافته تا نمایش روی موبایل بهینه شود.

تایم‌لاین افقی با اسکرول و Scroll Snap

<div class="h-timeline">
  <div class="h-item"><h4>مرحله 1</h4></div>
  <div class="h-item"><h4>مرحله 2</h4></div>
  <!-- موارد بیشتر -->
</div>

/* CSS */.h-timeline{ display:flex; gap:1rem; overflow-x:auto; padding:1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.h-item{ min-width:260px; flex:0 0 auto; background:#fff; padding:1rem; border-radius:8px; scroll-snap-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.06); }

توضیح: برای تایم‌لاین افقی از flex و overflow-x:auto استفاده شده و با scroll-snap کاربران می‌توانند به راحتی بین آیتم‌ها جا به جا شوند. این الگو برای صفحات معرفی محصول و نقشه راه بسیار مناسب است.

تایم‌لاین مرکزی (متناوب) با Grid یا Flex

.timeline-centered{ position:relative; }
.timeline-centered:before{ content:""; position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:2px; background:#e8e8e8; }
.timeline-row{ display:flex; justify-content:space-between; margin-bottom:2rem; }
.timeline-row .card{ width:45%; background:#fff; padding:1rem; border-radius:6px; }
.timeline-row:nth-child(even) .card{ order:2; }

توضیح: در این الگو خط زمان در وسط صفحه قرار می‌گیرد و با تغییر ترتیب (order) یا استفاده از nth-child آیتم‌ها به صورت تناوبی در دو طرف خط نمایش داده می‌شوند. می‌توان برای موبایل به حالت عمودی بازگشت داد تا خوانایی حفظ شود.

نمونه مقایسه — مزایا و معایب

نکات دسترس‌پذیری و سئو

• از عناصر معنایی و لیست‌ها (<ul> یا <ol>) برای نمایش آیتم‌ها استفاده کنید تا خوانایی برای صفحه‌خوان افزایش یابد.
• تاریخ‌ها را با تگ‌های مناسب (مثلاً <time datetime=”2024-01-15″>) قرار دهید تا موتورهای جستجو و ابزارهای کمکی بتوانند تشخیص دهند.
• کنتراست رنگ را رعایت کنید و برای نقاط قابل کلیک، اندازه هدف لمسی مناسب (حداقل 44×44 پیکسل) در موبایل در نظر بگیرید.
• در انیمیشن‌ها از transform و opacity استفاده کنید تا از repaintهای سنگین جلوگیری شود.

بهینه‌سازی انیمیشن و عملکرد

.timeline-item{ opacity:0; transform:translateY(12px); transition:opacity .4s ease, transform .4s ease; }
.timeline-item.in-view{ opacity:1; transform:translateY(0); }

توضیح: برای افکت ورود نرم از transform و opacity استفاده شده که خیلی از بار رندر را روی GPU می‌برد و از layout thrashing جلوگیری می‌کند. کلاس in-view معمولاً توسط Intersection Observer در JavaScript اضافه می‌شود تا فقط وقتی عنصر در viewport قرار گرفت، انیمیشن اجرا شود.

نکات حرفه‌ای و مثال‌های استفاده

• برای نمایش جزئیات بیشتر از حالت آکاردئونی داخل هر آیتم استفاده کنید تا فهرست خلاصه و قابل اسکن باقی بماند.
• در صفحات شرکت، تایم‌لاین را با میکروفرمت‌ها یا Schema.org (مثلاً Event) نشانه‌گذاری کنید تا در نتایج جستجو بهتر نمایش داده شود.
• اگر تعداد آیتم‌ها زیاد است، از lazy-loading برای تصاویر و بارگذاری تنبل بخش‌ها بهره ببرید تا زمان بارگذاری اولیه کاهش یابد.

نتیجه‌گیری

طراحی تایم‌لاین با CSS انعطاف‌پذیر و پرکاربرد است؛ از یک تایم‌لاین عمودی ساده تا یک افقی با اسکرول و یک تایم‌لاین مرکزی زیبا. با رعایت اصول واکنش‌گرایی، استفاده از متغیرهای CSS، بهینه‌سازی انیمیشن و توجه به دسترس‌پذیری می‌توان تجربه‌ای سریع، قابل فهم و جذاب ساخت.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال