Dengan menggunakan konsep dasar HTML, CSS, dan JS, Anda akan memiliki timeline yang menarik dan berjalan dalam waktu singkat.

Poin Penting

  • Garis waktu yang kuat mudah dibuat menggunakan CSS dan JavaScript.
  • Mulailah dengan menguraikan struktur HTML garis waktu dan menata elemen garis waktu dengan CSS.
  • Lanjutkan menambahkan animasi ke timeline menggunakan JavaScript. Anda dapat menggunakan API Intersection Observer untuk memudarkan item garis waktu saat digulir.

Garis waktu adalah alat visual canggih yang membantu pengguna menavigasi dan memahami peristiwa kronologis. Jelajahi cara membuat garis waktu interaktif menggunakan duo dinamis CSS dan JavaScript.

Membangun Struktur Garis Waktu

Anda dapat melihat kode lengkap untuk proyek ini darinya Repositori GitHub.

Untuk memulai, garis besar struktur HTML di indeks.html. Buat acara dan tanggal sebagai komponen terpisah, yang meletakkan dasar untuk garis waktu interaktif.

<body>
<sectionclass="timeline-section">
<divclass="container">
<divclass="Timeline__header">





instagram viewer



<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>


<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>

Saat ini, komponen Anda terlihat seperti ini:

Pilih Tata Letak untuk Timeline Anda: Vertikal vs. Horisontal

Saat mendesain garis waktu interaktif, Anda dapat memilih gaya vertikal atau horizontal. Garis waktu vertikal mudah digunakan, terutama pada ponsel, karena ini adalah arah umum yang digunakan situs web untuk menggulir. Jika timeline Anda memiliki banyak konten, ini mungkin tata letak yang paling nyaman.

Namun, garis waktu horizontal menarik pada layar lebar dan bagus untuk situs kreatif dengan lebih sedikit detail, sehingga dapat meminimalkan pengguliran dari sisi ke sisi. Setiap gaya memiliki kelebihannya masing-masing, cocok untuk berbagai jenis situs web dan pengalaman pengguna.

Gaya Timeline Dengan CSS

Ada tiga jenis elemen visual yang akan Anda gaya untuk garis waktu: garis, titik, dan penanda tanggal.

  • Garis: Garis vertikal tengah, dibuat menggunakan Timeline__content:: setelah elemen semu, berfungsi sebagai tulang punggung garis waktu. Itu ditata dengan lebar dan warna tertentu, diposisikan secara mutlak agar sejajar dengan bagian tengah item garis waktu.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Node: Lingkaran, ditata menggunakan kelas lingkaran, bertindak sebagai simpul pada garis waktu. Ini benar-benar diposisikan di tengah setiap item garis waktu dan secara visual berbeda dengan warna latar belakang, membentuk titik-titik penting di sepanjang garis waktu.
    .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;
    }
  • Penanda Tanggal: Tanggal, ditata menggunakan kelas Timeline__date, ditampilkan di kedua sisi timeline. Penempatannya bergantian antara kiri dan kanan untuk setiap item garis waktu, menciptakan tampilan yang seimbang dan terhuyung-huyung di sepanjang garis waktu.
    .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;}

Lihat set lengkap gaya dari Repo GitHub masuk gaya.css.

Setelah ditata, komponen Anda akan terlihat seperti ini:

Menganimasikan Dengan JavaScript

Untuk menganimasikan komponen ini, gunakan API Pengamat Persimpangan untuk menganimasikan item garis waktu saat digulir. Tambahkan kode berikut ke skrip.js.

1. Pengaturan awal

Pertama, pilih semua elemen dengan kelas Timeline__item.

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

2. Gaya Awal Item Timeline

Atur opacity awal setiap item ke 0 (tidak terlihat) dan terapkan a Transisi CSS untuk pemudaran halus.

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

Anda dapat mengatur gaya ini di style sheet, namun melakukan hal tersebut akan berbahaya. Jika JavaScript gagal dijalankan, pendekatan itu akan membuat timeline Anda tidak terlihat! Mengisolasi perilaku ini dalam file JavaScript adalah contoh yang bagus peningkatan progresif.

3. Callback Pengamat Persimpangan

Tentukan fungsi fadeInOnScroll untuk mengubah opacity item menjadi 1 (terlihat) ketika item tersebut berpotongan dengan viewport.

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

4. Pilihan Pengamat Persimpangan

Tetapkan opsi untuk pengamat, dengan ambang batas 0,1 yang menunjukkan bahwa animasi terpicu ketika 10% item terlihat.

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

5. Membuat dan Menggunakan Pengamat Persimpangan

Selesaikan dengan membuat IntersectionObserver dengan opsi ini dan menerapkannya ke setiap item timeline.

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

Hasil akhirnya akan terlihat seperti ini:

Praktik Terbaik Komponen Garis Waktu

Beberapa praktik yang harus dipatuhi meliputi:

  • Optimalkan timeline Anda untuk berbagai ukuran layar. Pelajari teknik desain responsif untuk memastikan pengalaman pengguna yang lancar di seluruh perangkat.
  • Gunakan praktik pengkodean yang efisien untuk memastikan animasi yang lancar.
  • Gunakan HTML semantik, rasio kontras yang tepat, dan label ARIA untuk aksesibilitas yang lebih baik.

Menghidupkan Garis Waktu Anda: Perjalanan dalam Desain Web

Membangun garis waktu yang interaktif bukan hanya tentang menyajikan informasi; ini tentang menciptakan pengalaman yang menarik dan informatif. Dengan menggabungkan struktur HTML, gaya CSS, dan animasi JavaScript, Anda dapat membuat garis waktu yang memikat audiens sekaligus menyampaikan konten yang berharga.