Tutorial Membuat Timeline Horisontal

Membuat Timeline Horisontal

Tuto-rial.comTutorial Membuat Timeline Horisontal merupakan tutorial yang mudah dalam menyesuaikannya, karena sudah didukung oleh CSS dan jQuery.

Membangun timeline horisontal ini agak rumit, karena Anda tidak dapat mengandalkan posisi vertikal(lebih intuitif) perilaku bergulir(scrolling). Kami memutuskan untuk memisah antara timeline dan peristiwa, dengan yang bagian pertama yang bekerja seperti slider, sedangkan yang kedua menduduki lebar penuh dan menunjukkan peristiwa tunggal pada suatu waktu.

Membuat struktur

Struktur HTML terdiri oleh 2 list utama yang menjadi kuncinya. Yang pertama berisi tanggal waktu dan yang kedua peristiwa.
Menambahkan sebuah kelasul.mt-timeline-navigation  digunakan untuk panah navigasi, dan kelasspan.filling-line  untuk menciptakan efek ketika sebuah even baru dipilih.

Menambahkan Style

Mari kita mulai dari even style, semua item akan dijelaskan ke sebelah kiri, di luar viewport(translateX(-100%)  ), sebuah kelas .selected ditambahkan ke item untuk menampilkan even dan digunakan untuk memindahkannya kembali ke viewport (translateX (0)  ).

Tutorial lainya   Membuat Website Responsive Tanpa Coding

4 kelas telah digunakan untuk membuat animasi slider,.enter-right  /.enter-left  kelas ditambahkan ke item event yang dipilih masuk viewport dari kanan/kiri, dan kelas.leave-right  /.leave-left  ditambahkan ke item event digunakan untuk membuat item tersebut bergerak ke kanan/kiri ketika event tersebut telah pergi dari viewport. Kelas ini digunakan untuk menerapkan dua animasi CSS yang berbeda yaitu:.mt-enter-right  (untuk kelas.enter-right  dan.leave-left ) dan.mt-enter-left  (untuk kelas.enter-left  dan.leave-right ).

Tentang timeline, posisi setiap tanggal di sepanjang timeline diatur menggunakan jQuery. Posisi tanggal tidak merata/tidak sama di setiap waktu, tetapi jarak antara tanggal berikutnya adalah sebanding dengan perbedaan antara tanggal tersebut.

Tutorial lainya   Tutorial Membuat Navigasi Tab yang Responsif

Pertama-tama, dalam file main.js, kami menetapkan jarak minimum antara dua tanggal berturut-turut, dengan menggunakaneventsMinDistance  variabel, dalam kasus ini, kami menetapkaneventsMinDistance=60  (sehingga jarak minimum bernilai 60px pada style nya). Kemudian kami mengevaluasi semua perbedaan antara tanggal dan pada bagian tertentu, untuk melakukan itu kita menggunakan atribut data tanggal yang ditambahkan ke setiap tanggal. Perbedaan minimum kemudian digunakan sebagai referensi untuk mengevaluasi jarak antara dua tanggal secara berturut-turut.

Sebagai contoh, mari kita misalkan nilai minimum perbedaan kita tetapkan adalah 5 hari, yang berarti bahwa jarak sekitar timeline berjarak antara dua tanggal yang dipisahkan berselang 5 hari dengan 60px, sedangkan satu di antara dua event terpisah oleh selang 10 hari akan bernilai 120px.

Tutorial lainya   Live CSS Editor Tools- Manipulasi CSS pada Browser

Tentang format tanggal, kami menggunakan format tanggal DD/MM/YYYY, tetapi Anda juga dapat menambahkan waktu, jika Anda perlu untuk memperhitungkannya.
Ada 3 format tanggal yang berbeda Anda dapat menggunakan yaitu:

  • DD / MM / YYYY, untuk format hari saja,
  • DD / MM / YYYYTHH: MM -> jika Anda ingin kustom waktu (contoh: 02/10/2015T19:45),
  • HH: MM -> untuk format waktu saja (untuk peristiwa yang terjadi dalam hari yang sama).

Catatan terakhir, data-date digunakan untuk tanggal timeline harus ditetapkan untuk event masing-masing (daftar item dalam elemen .events-content). Dengan cara ini, ketika pengguna memilih tanggal baru di sepanjang garis waktu, item event yang terkait dapat ditampilkan.

Demikian informasi yang kami sampaikan mengenai Tutorial Membuat Timeline Horisontal, semoga bermanfaat bagi kita semua. Berikan kritik dan saran Anda melalui form komentar dibawah mengenai artikel ini.

timeline-horisontal Demo
Penulis Tutorial

Penulis Tutorial

Kata terindah

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *