Advertisement
  1. Web Design
  2. Patterns

Membuat Timeline Vertikal Dengan CSS dan Sentuhan JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Pada tutorial ini, kita akan belajar cara membuat timeline vertikal yang responsif dari dasar. Pertama, kita akan membuat struktur dasar dengan markup yang minimal dan kekuatan elemen pseudo CSS. Kemudian, kita akan menggunakan beberapa JavaScript untuk menambahkan beberapa efek transisi saat kita menggulir halaman ke bawah.

Mari dapatkan gagasan tentang apa yang akan kita buat (lihat versi yang lebih besar di CodePen).

1. HTML Markup

Markup yang akan kita gunakan cukup mudah; sebuah daftar kosong tanpa urutan dengan elemen div di dalam masing-masing daftar item kita. Karena kita sedang berurusan dengan event di sepanjang timeline, kita akan memberikan setiap daftar item sebuah elemen time untuk menampilkan tahunnya.

Selain itu, kita akan membungkus semuanya dalam elemen section dengan class timeline:

Ini memberikan kita output tanpa style berikut:

2. Menambahkan Style CSS Awal

Setelah beberapa warna dasar dll. (lihat bagian atas CSS pada pen di bawah) kita akan menentukan beberapa aturan CSS struktural untuk daftar item. Kita juga akan memberikan style pseudo-element ::after dari item ini:

Saya telah menghapus konten dalam daftar item untuk membuat langkah ini lebih jelas, yang memberikan kita hal-hal berikut:

3. Memberikan style elemen timeline

Sekarang mari berikan style elemen-elemen div (kita akan menyebutnya "elemen timeline" mulai sekarang) yang merupakan bagian dari daftar item. Sekali lagi, kita berikan style pseudo-element ::before pada elemen-elemen ini.

Juga, seperti yang akan kita lihat sebentar lagi, tidak semua div membagikan gaya yang sama. Berkat: pseudo-class CSS :nth-child(odd) dan :nth-child(even), kita dapat membedakan style mereka.

Lihatlah aturan CSS terkait di bawah ini:

Kemudian beberapa style untuk elemen odd (ganjil) kita:

Lalu akhirnya berikan style untuk elemen even (genap) kita:

Dengan aturan-aturan ini di letak (dan HTML kita sekali lagi lengkap dengan konten) timeline kita terlihat sebagai berikut:

Perbedaan utama antara div "odd' dan  "even" adalah posisi mereka. Yang pertama memiliki left:45px; sedangkan yang kedua left:-439px;. Untuk memahami posisi div even kita, mari lakukan beberapa matematika sederhana:

Lebar setiap div + Jarak yang diinginkan - Lebar setiap daftar item = 400px + 45px - 6px = 439px

Yang kedua, perbedaan yang kurang penting adalah panah yang dihasilkan dari pseduo-element mereka Yang itu berarti, pseudo-element dari masing-masing div "odd" memiliki panah kiri, sedangkan pseudo-element dari masing-masing div "even" ditampilkan sebagai panah kanan.

4. Menambah Interaktivitas

Setelah struktur dasar timeline siap, mari cari tahu persyaratan baru:

  • Secara default, elemen timeline (div) semestinya disembunyikan.
  • Mereka semestinya muncul ketika induk mereka (daftar item) memasuki viewport.

Tugas pertama relatif mudah. Yang kedua, sedikit lebih rumit. Kita perlu mendeteksi jika elemen target (daftar item) sepenuhnya terlihat di viewport saat ini, lalu jika itu terjadi, kita akan menampakkan turunannya. Untuk menerapkan fungsi ini, kita tidak akan menggunakan library JavaScript eksternal (semisal. WOW.js atau ScrollReveal.js) atau tuliskan kode kompleks kita sendiri. Untungnya, ada thread populer di StackOverlow tentang masalah ini. Jadi untuk yang pertama mari kita manfaatkan jawaban yang diajukan untuk menguji apakah suatu elemen terlihat di viewport saat ini atau tidak.

Berikut adalah fungsi yang disederhanakan, yang akan kita gunakan:

Menambahkan Class Saat Dibagian View

Selanjutnya kita menambahkan class in-view ke daftar item yang terlihat di viewport saat ini.

Catatan: penting untuk kita menguji apakah mereka terlihat dalam kasus berikut:

  • Saat halaman dimuat
  • Saat kita menggulir ke bawah

Jika diperlukan, kita dapat melakukan beberapa tes tambahan (seperti ketika ukuran jendela browser berubah).

Dalam contoh kita, inilah kode yang kita gunakan:

Sekarang setelah kita menambahkan JavaScript, jika kita memuat ulang halaman, kita akan melihat hasil yang serupa dengan ini:

Menyembunyikan dan Menampakkan

Mari sekarang tinjau kembali persyaratan awal kita. Ingat, secara default, semua div semestinya disembunyikan. Untuk mencapai hal ini, kita menggunakan properti CSS visibility dan opacity. Selanjutnya, kita menggunakan translate3d() untuk memindahkannya 200px dari posisi aslinya. Selama induk mereka terlihat, kita akan mengungkapkannya dan menghapus offset yang telah ditentukan.  Dengan cara ini, kita membuat efek slide yang bagus.

Terakhir, hal kecil lain yang akan kita lakukan ketika li berada di dalam viewport, adalah mengubah warna background pseudo-element ::before.

Style berikut akan mengurus semua itu:

Visualisasi berikut menunjukkan keadaan awal dari timeline kita. Di sini kamu dapat melihat elemen timeline karena saya telah memberi sentuhan opacity hanya untuk menggambarkan di mana awalnya mereka berada:

The default appearance of the timeline before the animations

Dan inilah keadaan terakhir dari timeline:

The final appearance of the timeline after the animations

5. Menjadikan Responsif

Kita hampir siap! Hal terakhir yang harus kita lakukan adalah membuat timeline kita responsif.

Pertama, pada apa yang akan kita sebut sebagai "medium screen" (>600px dan ≤900px), kita hanya membuat satu modifikasi kecil. Secara khusus, kita mengurangi lebar dari div.

Berikut adalah aturan yang harus kita ubah:

Dalam kasus seperti itu, timeline-nya terlihat seperti ini:

Namun pada layar kecil (≤600px), semua elemen timeline terlihat sama; tidak ada perbedaan antara div "odd" dan "even". Sekali lagi, kita harus menimpa beberapa aturan CSS:

Pada layar yang lebih kecil, timeline-nya terlihat sebagai berikut:

Catatan: pada layar kecil kita akan menggunakan unit vw untuk menentukan lebar elemen timeline. Tidak ada alasan khusus di balik pendekatan ini. Kita bisa saja menggunakan persen atau pixel.

Dukungan Browser

Demo ini berfungsi dengan baik di sebagian besar browser dan perangkat terbaru. Namum pada perangkat iOS, elemen timeline selalu terlihat, bukannya muncul ketika induk mereka memasuki viewport.

Dari pengujian saya, saya telah melihat bahwa pada properti window.innerHeight and document.documentElement.clientHeight tidak mengembalikan ketinggian viewport yang sebenarnya. Secara khusus, mereka mengembalikan jumlah angka yang jauh lebih besar. Sebagai hasil dari ketidakkonsistenan itu, semua daftar item menerima class in-view ketika halaman dimuat.

Meskipun itu bukan masalah besar (kamu mungkin ingin animasinya hanya di layar besar), jika kamu tahu lebih banyak tentang masalah ini atau kamu telah melihatnya sebelumnya, jangan lupa untuk meninggalkan detail di komentar.

Kesimpulan

Pada tutorial ini, kita membuat timeline vertikal yang responsif. Kita telah membahas banyak hal, jadi mari kita rekap:

  • Dengan menggunakan daftar acak sederhana dan CSS pseudo-lement, kita berhasil membangun struktur utama dari timeline kita. Namun, satu kelemahan dari pendekatan ini adalah, seperti yang sudah saya sebutkan di artikel lain, CSS pseudo-element tidak 100% dapat diakses, jadi ingatlah itu.
  • Kita mengambil keuntungan dari cuplikan kode yang diambil dari thread populer di StackOverflow untuk menguji apakah daftar item di dalam view atau tidak. Kemudian, kita menulis CSS kita sendiri untuk menganimasikan elemen turunannya. Atau, kita bisa menggunakan library JavaScript atau menulis kode kita sendiri.

Saya harap kamu menikmati tutorialnya dan kamu akan menggunakan timeline ini sebagai dasar untuk membuat sesuatu yang menarik. Jika kamu punya pertanyaan, beri tahu saya dalam komentar di bawah!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.