خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

ایجاد یک جدول زمانی تعاملی با CSS و جاوا اسکریپت

ارشیا یوسفی ادیب ۲۶ آبان, ۱۴۰۲ 4 دقیقه زمان مطالعه

با استفاده از مفاهیم اولیه HTML، CSS و JS، یک جدول زمانی جذاب خواهید داشت که در کمترین زمان ممکن راه اندازی و اجرا می شود.

نکات کلیدی

  • ایجاد یک جدول زمانی قدرتمند با استفاده از CSS و جاوا اسکریپت آسان است.
  • با ترسیم ساختار HTML خط زمانی و استایل دادن به عناصر جدول زمانی با CSS شروع کنید.
  • با استفاده از جاوا اسکریپت به افزودن انیمیشن به جدول زمانی ادامه دهید. می‌توانید از Intersection Observer API برای محو شدن موارد خط زمانی در اسکرول استفاده کنید.

خطوط زمانی ابزارهای بصری قدرتمندی هستند که به کاربران کمک می کنند تا رویدادهای زمانی را درک کنند. نحوه ایجاد یک جدول زمانی تعاملی با استفاده از دوتایی پویا CSS و جاوا اسکریپت را بررسی کنید.

ساختن ساختار جدول زمانی

می توانید کد کامل این پروژه را از مخزن GitHub آن بررسی کنید.

برای شروع، ساختار HTML را در index.html ترسیم کنید. رویدادها و تاریخ‌ها را به‌عنوان اجزای مجزا ایجاد کنید و پایه و اساس جدول زمانی تعاملی را ایجاد کنید.

<body>
  <section class="timeline-section">
    <div class="container">
      <div class="Timeline__header">
        <h2>Timeline</h2>

        <p class="heading--title">
          Here is the breakdown of the time we anticipate <br />
          using for the upcoming event.
        </p>
      </div>

      <div class="Timeline__content">
        <div class="Timeline__item">
          <div class="Timeline__text">
            <h3>Occasion 1</h3>

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

            <span class="circle">1</span>
          </div>

          <h3 class="Timeline__date">12 Dec. 2023</h3>
        </div>

        <div class="Timeline__item">
          <div class="Timeline__text">
            <h3>Occasion 2</h3>

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

            <span class="circle">2</span>
          </div>

          <h3 class="Timeline__date">12 Dec. 2023</h3>
        </div>
        <!-- More Items -->
      </div>
    </div>
  </section>
</body>

در حال حاضر، کامپوننت شما به شکل زیر است:

مطلب مرتبط:   نحوه پیاده سازی کنترل دسترسی مبتنی بر نقش در Express.js REST API با استفاده از Passport.js و JWT

ساختار html جزء تایم لاین

یک طرح برای خط زمانی خود انتخاب کنید: عمودی در مقابل افقی

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

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

تایم لاین را با CSS سبک کنید

سه نوع عنصر بصری وجود دارد که شما برای خط زمانی استایل می دهید: خطوط، گره ها و نشانگرهای تاریخ.

  • خطوط: یک خط عمودی مرکزی، ایجاد شده با استفاده از Timeline__content::after شبه عنصر، به عنوان ستون فقرات خط زمانی عمل می کند. با عرض و رنگ خاصی طراحی شده است، کاملاً طوری قرار داده شده است که با مرکز موارد جدول زمانی هماهنگ باشد. .Timeline__content::after {  background-color: var(–clr-purple); محتوا: “”؛ موقعیت: مطلق; سمت چپ: calc (50٪ – 2px)؛ عرض: 0.4rem; قد: 97%; z-index: -5;}
  • گره ها: دایره هایی که با استفاده از کلاس دایره ای استایل بندی شده اند، به عنوان گره در خط زمانی عمل می کنند. اینها کاملاً در مرکز هر آیتم جدول زمانی قرار دارند و از نظر بصری با رنگ پس‌زمینه متمایز هستند و نقاط کلیدی را در طول خط زمانی تشکیل می‌دهند. .circle {   position: absolute; پس زمینه: var(–clr-بنفش); بالا: 50%; سمت چپ: 50%; transform: translate(-50%, -50%); حداکثر عرض: 6.8 rem; عرض: 100%؛ نسبت تصویر: 1/1; شعاع مرزی: 50%; صفحه نمایش: انعطاف پذیر; justify-content: center; align-اقلام: مرکز; z-index: 3; اندازه فونت: 1.6rem;}
  • نشانگرهای تاریخ: تاریخ ها که با استفاده از کلاس Timeline__date استایل بندی شده اند، در دو طرف خط زمانی نشان داده می شوند. موقعیت آنها به طور متناوب بین چپ و راست برای هر آیتم جدول زمانی تغییر می کند و ظاهری متزلزل و متعادل در طول خط زمانی ایجاد می کند. .Timeline__text,.Timeline__date { عرض: 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-اقلام: flex-end; padding-right: 8.3rem;}.Timeline_item:nth-child(odd) .Timeline_date { padding-left: 8.3rem;}
.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__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 بررسی کنید.

مطلب مرتبط:   دکوراتورهای پایتون: آنها چه هستند و چگونه می توانید از آنها استفاده کنید؟

پس از استایل کردن، کامپوننت شما باید به شکل زیر باشد:

جزء جدول زمانی پس از یک ظاهر طراحی شده

متحرک سازی با جاوا اسکریپت

برای متحرک سازی این مؤلفه، از Intersection Observer API برای متحرک سازی موارد جدول زمانی در اسکرول استفاده کنید. کد زیر را به script.js اضافه کنید.

1. راه اندازی اولیه

ابتدا تمام عناصر با کلاس Timeline__item را انتخاب کنید.

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

2. سبک سازی اولیه آیتم های جدول زمانی

Opacity اولیه هر آیتم را روی 0 (غیر قابل مشاهده) قرار دهید و یک انتقال CSS برای محو شدن صاف اعمال کنید.

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

شما می توانید این سبک ها را در شیوه نامه تنظیم کنید، اما انجام این کار خطرناک خواهد بود. اگر جاوا اسکریپت اجرا نشود، این روش خط زمانی شما را نامرئی می کند! جداسازی این رفتار در فایل جاوا اسکریپت نمونه خوبی از بهبود پیشرونده است.

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. ایجاد و استفاده از Intersection Observer

کار را با ایجاد یک IntersectionObserver با این گزینه ها و اعمال آن در هر آیتم جدول زمانی به پایان برسانید.

const observer = new IntersectionObserver(fadeInOnScroll, options);

timelineItems.forEach((item) => {
    observer.observe(item);
});

نتیجه نهایی باید به این صورت باشد:

مطلب مرتبط:   نحوه ایجاد یک صفحه وب بدون کد در Notion: راهنمای گام به گام

بهترین روش های مؤلفه جدول زمانی

برخی از اقداماتی که باید رعایت شوند عبارتند از:

  • جدول زمانی خود را برای اندازه های مختلف صفحه نمایش بهینه کنید. تکنیک‌های طراحی واکنش‌گرا را بیاموزید تا از تجربه کاربری یکپارچه در همه دستگاه‌ها اطمینان حاصل کنید.
  • از شیوه های کدنویسی کارآمد برای اطمینان از انیمیشن های روان استفاده کنید.
  • برای دسترسی بهتر از HTML معنایی، نسبت کنتراست مناسب و برچسب‌های ARIA استفاده کنید.

زنده کردن خط زمانی شما: سفری در طراحی وب

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

Tags: