Membuat Timeline Horizontal dengan CSS dan JavaScript

() translation by (you can also view the original English article)

Di kiriman sebelumnya, saya menunjukkan cara membuat sebuah linimasa responsif vertikal dari awal. Hari ini, saya akan melingkupi proses dari pembuatan lini masa horizontal.

Seperti biasa, untuk menangkap ide awal mengenai apa yang akan kita buat. Lihatlah sebentar ke demo CodePen (cek versi yang lebih besar untuk pengalaman yang lebih baik)

Ada banyak hal yang akan kita bahas, jadi mari kita mulai!

1. HTML Markup

Markup-nya adalah markup yang mirip dengan yang kita definisikan untuk linimasa vertikal, terbagi dari tiga hal kecil:

Kita menggunakan ordered list ketimbang sebuah unordered list karena lebih tepat secara semantik.
Ada sebuah list item ekstra (yang terakhir) yang kosong. Di bagian berikutnya, kita akan menjelaskan alasannya.
Ada sebuah elemen ekstra (yaitu .arrows) yang bertanggung jawab untuk navigasi di linimasa.

Ini adalah markup yang diperlukan:

<section class="timeline">
  <ol>
    <li>
      <div>
        <time>1934</time>
        Some content here
      </div>
    </li>
     
    <!-- more list items here -->
    
    <li></li>
  </ol>
  
  <div class="arrows">
    <button class="arrow arrow__prev disabled" disabled>
      <img src="arrow_prev.svg" alt="prev timeline arrow">
    </button>
    <button class="arrow arrow__next">
      <img src="arrow_next.svg" alt="next timeline arrow">
    </button>
  </div>
</section>

Keadaan awal dari linimasa akan tampak seperti ini:

2. Menambahkkan Initial CSS Styles

Setelah beberapa style font dasar, color style dan lainnya. Yang telah saya hilangkan di sini demi kesederhanaan. Kita mengspesifikasikan beberapa structural CSS rules:

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #fff;
}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #F45B69;
}

Yang paling penting di sini, kamu akan menyadari dua hal:

Kita meng-assign top dan bottom padding ke list. Sekali lagi, kita akan jelaskan kenapa ini terjadi di bagian berikutnya.
Seperti yang kamu sadari di demo di bawah, di titik ini kita tidak bisa melihat semua item karena list-nya memiliki width: 100vw dengan parent overflow-x: hidden. Ini secara efektif akan meng-mask item di list. Terima kasih kepada navigasi linimasa. Namun, kita akan bisa bernavigasi ke item-itemnya nanti.

Dengan aturan ini di tempat, ini adalah keadaan saat ini dari linimasa (tanpa konten aktual apapun, untuk membuatnya jelas):

3. Elemen Styles Linimasa

Hingga titik ini kita telah mengatur elemen div (kita akan sebut mereka "elemen linimasa" mulai sekarang) yang merupakan bagian dari list item karena elemen semu ::before mereka.

Tambahan, kita akan menggunakan class CSS semu :nth-child(odd) dan :nth-child(even) untuk membedakan gaya dari div ganjil dan genap.

Ini adalah gaya umum untuk elemen linimasa:

.timeline ol li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
}

.timeline ol li div::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

Lalu, beberapa styles untuk yang ganjil:

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}

Dan terakhir beberapa styles untuk yang genap:

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}

Ini adalah tampilan baru dari linimasa dengan konten dimasukkan:

Seperti yang mungkin kamu sadari, elemen linimasi terposisikan secara absolut. Ini artinya mereka dihapus dari alur dokumen normal. Dengan hal tersebut diingat, untuk memastikan agar seluruh linimasa dapat tampil, kita harus menyiapkan nilai padding atas dan bawah yang bear untuk list-nya. Jika kita tidak menerapkan padding apapun, maka linimasanya akan terpotong.

How the timeline looks like without paddings

4. Styles Navigasi Linimasa

Sekarang waktunya untuk memberi style dari tombol navigasi. Ingat bahwa pada dasarnya kita menonaktifkan panah kembali dan memberikannya kelas disabled.

Ini adalah CSS Styles yang terasosiasi:

.timeline .arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.timeline .arrows .arrow__prev {
  margin-right: 20px;
}

.timeline .disabled {
  opacity: .5;
}

.timeline .arrows img {
  width: 45px;
  height: 45px;
}

Aturan di atas memberikan kita linimasa berikut:

5. Menambahkan Interaktifitas

Struktur dasar dari linimasa telah siap. Mari tambahkan beberapa interaktifitas ke dalamnya!

Variabel

Hal yang pertama, kita menyiapkan sekumpulan variabel yang akan kita gunakan nanti.

const timeline = document.querySelector(".timeline ol"),
  elH = document.querySelectorAll(".timeline li > div"),
  arrows = document.querySelectorAll(".timeline .arrows .arrow"),
  arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
  arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
  firstItem = document.querySelector(".timeline li:first-child"),
  lastItem = document.querySelector(".timeline li:last-child"),
  xScrolling = 280,
  disabledClass = "disabled";

Menginisialisasi

Ketika semua aset halaman telah siap, fungsi init akan terpanggil.

1	window.addEventListener("load", init);

Fungsi ini akan memicu empat sub-functions:

function init() {
  setEqualHeights(elH);
  animateTl(xScrolling, arrows, timeline);
  setSwipeFn(timeline, arrowPrev, arrowNext);
  setKeyboardFn(arrowPrev, arrowNext);
}

Seperti yang kita lihat, setiap fungsi menyelesaikan tugas tertentu.

Elemen Equal-Height Linimasa

Jika kamu kembali ke demo terakhir kamu akan menyadari bahwa elemen linimasa tidak memiliki tinggi yang sama. Ini tidak akan mempengaruhi fungsi utama dari linimasa kita. Tapi, jika kamu mungkin ingin setiap elemen linimasa memiliki tinggi yang sama. Untuk mencapainya, kita bisa memberikan mereka baik sebuah tinggi fixed melalui CSS (solusi mudah) atau tinggi dinamis yang berkorenspon dengan elemen tertinggi melaui JavaScript.

Opsi kedua jauh lebih fleksibel dan stabil, jadi inilah sebuah fungsi yang mengimplementasikannya.

function setEqualHeights(el) {
  let counter = 0;
  for (let i = 0; i < el.length; i++) {
    const singleHeight = el[i].offsetHeight;
    
    if (counter < singleHeight) {
      counter = singleHeight;
    }
  }
  
  for (let i = 0; i < el.length; i++) {
    el[i].style.height = `${counter}px`;
  }
}

Fungsi ini akan memberikan tinggi dari elemen tertinggi di linimana dan mengaturnya sebagai dasar dari tinggi untuk semua elemen.

Ini adalah tampilan demonya:

6. Menganimasikan Linimasa

Sekarang mari fokus pada animasi di linimasa, kita akan membuat fungsi yang akan mengimplementasikannya.

Pertama, mari daftarkan sebuah click event listener untuk tombol linimasa:

function animateTl(scrolling, el, tl) {
  for (let i = 0; i < el.length; i++) {
    el[i].addEventListener("click", function() {
      // code here
    });
  }
}

Setiap kali tombol di klik, kita mencentang keadaan nonakftif dari tombol linimasa dan jika mereka tidak nonaktif kita akan menonaktifkannya. Ini memastikan bahwa kedua tombol hanya akan di klik sekali hingga animasi selesai.

Jadi, dalam hal kode, click handler akan mengandung baris berikut:

if (!arrowPrev.disabled) {
  arrowPrev.disabled = true;
}

if (!arrowNext.disabled) {
  arrowNext.disabled = true;
}

Langkah selanjutnya adalah sebagai berikut:

Kita akan mengecek untuk melihat apakah ini waktu pertama kita mengklik sebuah tombol. Sekali lagi, ingiat bahwa tombol previous pada dasarnya diatur ke disabled, jadi tombol yang bisa diklik hanya tombol next.
Kalau memang ini kali yang pertama, kita menggunakan properti transform untuk memindahkan linimasa 280px ke kanan. Nilai dari variable xScrolling menentukan jumlah dari pergerakan.
Di sisi lain, jika kita telah mengklik sebuah tombol, kita akan mendapatkan nilai dari transform saat ini dan menambahkan atua mengurangi nilainya sesuai jumlah yang diinginkan (yaitu 280px). Jadi, sepanjang kita mengklik tombol previous, nilai properti transform akan berukurang dan linimasa bergerak ke kiri. Namun, ketika tombol next diklik, nilai dari properti transform meningkat dan linimasa bergerak di kanan ke kiri.

Kode yang mengimplementasikannya sebagai berikut:

let counter = 0; 
for (let i = 0; i < el.length; i++) {
  el[i].addEventListener("click", function() {
    // other code here
  
    const sign = (this.classList.contains("arrow__prev")) ? "" : "-";
    if (counter === 0) {
      tl.style.transform = `translateX(-${scrolling}px)`;
    } else {
      const tlStyle = getComputedStyle(tl);
      // add more browser prefixes if needed here
      const tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("transform");
      const values = parseInt(tlTransform.split(",")[4]) + parseInt(`${sign}${scrolling}`);
      tl.style.transform = `translateX(${values}px)`;
    }
    counter++;
  });
}

Kerja bagus! Kita baru saja mendefinisikan sebuah cara menganimasikan linimasa. Tantang selanjutnya adalah untuk mencari tahu kapan animasi ini harus berhenti. Begini pendekatan kami:

Ketika elemen pertama linimasa jadi dapat terlihat sepenuhnya, ini berarti kitatelah mencapai awal dari linimasa, dan akan menonaktifkan tombol previous. Kita juga memastikan tombol next aktif.
Ketika elemen terakhir dari linimasa terlihatsepenuhnya, ini berarti kita telah mencapai akhir dari linimasa, sehingga kita menonaktifkan tombol next. Kita juga memastika tombol previous aktif.

Ingat bahwa element terakhir adalah yang kosong dengan lebar yang sama dengan elemen linimasa (yaitu 280px). Kita memberikan nilai ini (atau yang lebih tinggi) karena kita ingin memastikan bahwa leemen terkahir linimana akan terlihat sebelum mematikan tombol next.

Untuk mendeteksi elemen target telah terliha sepenuhnya di viewport atau tidak. Kita akan mengambil keuntungan dari kode yang kita gunakan di linimasa vertikal. Kode yang dibutuhkan muncul dari Thread Stack Overflow seperti berikut:

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Disamping fungsi di atas, kita akan mendefinisikan pembantu lainnya:

function setBtnState(el, flag = true) {
  if (flag) {
    el.classList.add(disabledClass);
  } else {
    if (el.classList.contains(disabledClass)) {
      el.classList.remove(disabledClass);
    }
    el.disabled = false;
  }
}

Fungsi ini menambahkan atau menghilangkan class disabled dari sebuah elemen berdasarkan nilai dari parameter flag. Dia bisa merubah keadaan disabled untuk elemen ini.

Seletah memberikan deskripsi di atas, ini adalah kode yang kita buat untuk mengecek apakah animasi harus berhenti ataukah tidak:

for (let i = 0; i < el.length; i++) {
  el[i].addEventListener("click", function() {
    // other code here
    
    // code for stopping the animation
    setTimeout(() => {
      isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
      isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
    }, 1100);
  
    // other code here
  });
}

Perhatikan ada delay 1.1 detik sebelum mengeksekusi kode ini. Kenapa ini terjadi?

Jika kita kembali ke CSS kita, kita akan melihat rule berikut:

1	.timeline ol {
2	transition: all 1s;
3	}

Jadi, animasi linimasa membutuhkan waktu satu detik untuk selesai. Dan saat selesai kita akan menunggu 100 milisekon lalu melakukan cek.

Beginilah linimasa dengan aimasi:

7. Menambahkan Dukungan Geser

Sejauh ini, linimasa tidak merespon event sentuhan. Ini akan jadi bagus jika kita bisa menambahkan fungsi tersebut. Untuk menyelesaikannya, kita bisa menulis kode JavaScript untuk implementasinya atau menggunakan salah satu pustaka terkait (seperti Hammer.js, TouchSwipe.js) yang ada di luar sana.

Untuk demo kita, kita akan membuatnya tetap sederhana dan menggunakan Hammer.js, jadi pertama-tama kita memasukkan pustakanya ke pen kita.

Lalu kita deklarasikan fungsi yang terasosiasi:

function setSwipeFn(tl, prev, next) {
  const hammer = new Hammer(tl);
  hammer.on("swipeleft", () => next.click());
  hammer.on("swiperight", () => prev.click());
}

Di dalam fungsi di atas kita melakukan hal berikut:

Membuat instance dari Hammer.
Mendaftarkan handler untuk event swipeleft dan swiperight.
Ketika menggeser linimasa ke arah kiri, kita memicu sebuah klik ke tombol next dan menggeser linimasa dari kanan ke kiri.
Ketika kita menggeser linimasa ke arah kanan, kita memicu sebuah klik ke tombol previous dan akan menganimasikan linimasa dari kiri ke kanan.

Linimasa dengan dukungan layar sentuh:

Menambahkan Navigasi Keyboard

Mari tingkatkan lebih jauh pengalaman pengguna dengan menyediakan dukungan navigasi papan ketik, tujuan kita:

Ketika panah kiri atau kanan ditekan, dokumen harus tergeser ke posisi atas dari lini masa (jika bagian halaman lain sedang terlihat). Ini memastkan seluruh linimasa akan terlihat.
Secara spesifik, ketika tombol kiri ditekan, linimasa harus teranimasi dari kiri ke kanan.
Di cara yang sama, ketika tombol kanan ditekan, lini masa harus beranimasi dari kanan ke kiri.

Fungsi yang terasosiasi adalah sebagai berikut:

function setKeyboardFn(prev, next) {
  document.addEventListener("keydown", (e) => {
    if ((e.which === 37) || (e.which === 39)) {
      const timelineOfTop = timeline.offsetTop;
      const y = window.pageYOffset;
      if (timelineOfTop !== y) {
        window.scrollTo(0, timelineOfTop);
      } 
      if (e.which === 37) {
        prev.click();
      } else if (e.which === 39) {
        next.click();
      }
    }
  });
}

Linimasa dengan dukungan papan ketik:

8. Menjadi responsif

Kita hampir selesai! Namun sebelumnya, mari kita buat linimasanya menjadi responsif. Ketika viewport-nya kurang dari 600px, ini seharusnya memiliki layout seperti berikut:

Karena kita menggunakan pendekatan desktop, ini adalah CSS rules yang harus kita tulis lagi.

@media screen and (max-width: 599px) {
  .timeline ol,
  .timeline ol li {
    width: auto; 
  }
  
  .timeline ol {
    padding: 0;
    transform: none !important;
  }
  
  .timeline ol li {
    display: block;
    height: auto;
    background: transparent;
  }
  
  .timeline ol li:first-child {
    margin-top: 25px;
  }
  
  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }
  
  .timeline ol li div {
    width: 94%;
    height: auto !important;
    margin: 0 auto 25px;
  }
  
  .timeline ol li:nth-child div {
    position: static;
  }
  
  .timeline ol li:nth-child(odd) div {
    transform: none;
  }
  
  .timeline ol li:nth-child(odd) div::before,
  .timeline ol li:nth-child(even) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }
  
  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::before,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {
    display: none;
  }
}

Catatan: Untuk kedua aturan di atas, kita telah menggunakan aturan !important untuk inline styles yang diterapkan melalui JavaScript.

Keadaan akhir dari linimasa kita:

Dukungan Browser

Demo tersebut bekerja dengan baik di semua perangkat dan browser terbaru. Namun yang mungkin kamu sadari kita menggunakan Babel untuk meng-compile kode ES6 kita ke ES5.

Satu-satunya isu kecil yang saya alami ketika mengetes adalah perubahan teks render yang terjadi ketika linimasa sedang dianimasikan. Meskipun saya telah mencoba berbagai pendekatan berbeda yang ditawarkan Stack Overflow, saya tidak menemukan solusi mudah untuk semua sistem operasi dan browser. Jadi, simpan di pikiranmu bahwa kamu mungkin melihat sedikit masalah font rendering saat linimasa sedang dianimasikan.

Kesimpulan

Di panduan penting ini, kita memulai dengan ordered list sederhana dan membuat sebuah linimasa horizontal responsif. Tanpa ragu, kita telah membahas banyak hal menarik dan saya harap kamu menikmati pekerjaan hingga hasil akhir dan ini membantumu mendapatkan pengetahuan baru.

Jika kamu memiliki pertanyaan atau sesuatu yang tidak kamu pahami, biarkan saya tahu di kolom komentar di bawah!

Langkah Berikutnya

Jika kamu ingin mengembangkan lebih linimasa, ini adalah beberapa hal yang bisa dilakukan:

Menambahkan dukungan dragging. Daripada mengklik tombol di linimasa untuk bernavigasi, kita bisa cukup men-drag area linimasa. Untuknya, kamu bisa baik menggunakan Drag and Drop API (yang sayangnya tidak mendukung perangkat mobile saat ini ditulis) atau pustaka eksternal seperti Draggable.js
Tingkatkan perilaku linimasa seperti saat kita mengecilkan layar di mana tombol harus aktif dan nonaktif dengan benar.
Atur kode dalam cara yang lebih mudah diatur, mungkin, menggunakan JavaScript Design Pattern.