Garis waktu atau garis waktu adalah salah satu elemen ekstra yang kami bisa sematkan ke situs web untuk menunjukkan kemajuan atau evolusi pada tahun-tahun suatu perusahaan atau perusahaan. Ekspresi grafis visual yang baik yang mengetahui cara menyusunnya secara elegan dengan tipografi dan elemen visual, dapat menunjukkan langkah-langkah yang diambil oleh suatu layanan atau produk dari waktu ke waktu.
Berikut 29 timeline yang akan Anda temukan di bawah ini dari garis waktu vertikal seperti akan menjadi horizontal. Anda akan menemukan yang terbaik yang sesuai dengan kebutuhan Anda untuk menemukannya di halaman situs web yang Anda kembangkan untuk klien atau untuk Anda sendiri. Kami pergi dengan koleksi garis waktu yang sangat menarik yang sangat menyenangkan secara visual.
Garis waktu dengan menggulir
Garis waktu yang ada dalam kode HTML, CSS, dan JavaScript untuk memposisikan dirinya dengan baik sebagai file minimalis yang bagus yang menempatkan aksen merah untuk daftar tahun di sisi kiri, dan hitam untuk jenis huruf dan H2s. Hal terbaik tentang garis waktu ini adalah saat Anda menggulir halaman, perubahan tahun secara otomatis akan dilakukan. Hasil akhir, desain dan hasil yang bagus.
Garis waktu di CSS
Garis waktu ini menggunakan kode CSS bahkan untuk dapat dikonfigurasi dengan tepat di beberapa propertinya. Tidak ada scrolling Seperti yang sebelumnya, tetapi ditandai dengan serangkaian kotak dan warna biru untuk memberikan sentuhan yang sangat elegan dan menambah daftar garis waktu publikasi ini.
Penggeser garis waktu responsif
Garis waktu ini dibuat dengan pustaka Swiper JS untuk menyertakan kode HTML, CSS, dan JavaScript. Itu tidak memiliki pengguliran saat kita maju melalui halaman web, tetapi itu terjadi menempatkan tahun di sisi kanan dan tombol yang dapat kita gunakan untuk melanjutkan ke tahun berikutnya, selain dapat menggunakan penunjuk mouse untuk pergi ke tahun tertentu. Animasi hebat di setiap transisi.
Garis waktu lanjutan
Garis waktu ini menonjol karena menggunakan HTML, CSS dan JavaScript, selain pergi ke monocolor tersebut, tepatnya di rona merah. Ini juga ditandai dengan penggunaan tombol yang memungkinkan untuk maju atau kembali ke garis waktu yang ditandai dengan kode hasil yang bagus ini menjadi sangat minimalis.
Timeline dengan header tetap dan Flexbox
Kode HTML dan CSS untuk header tetap itu itu akan tetap diperbaiki saat kita melakukan scrolling di halaman. Sangat halus untuk menjadi garis waktu yang sangat menarik bagi pengembang saat ini yang ingin menonjol untuk standar desain web saat ini.
Garis waktu proyek
Garis waktu ini menggunakan CSS dan HTML untuk menyajikan garis waktu penting untuk digunakan periode waktu tertentu itu untuk sebuah proyek. Saat kami menggulirnya melewati hari-hari dalam seminggu, jadi sangat cocok untuk menerapkannya untuk alat kolaboratif yang dibuat oleh perusahaan itu sendiri.
Perusahaan
Garis waktu masuk HTML, CSS dan JavaScript yang menonjol dari yang lain untuk tema visual. Dan saat kita menggulir melalui garis waktu vertikal, setiap kali kita menemukan foto baru di garis waktu, itu akan menjadi gambar latar belakang halaman web tempat kita meletakkan kode ini.
Hyperloop
Hyperloopu adalah garis waktu itu agak menonjol untuk desain yang digunakan dan karena diprogram tidak lebih dari HTML dan CSS. Ini ditandai dengan penggunaan ukuran yang berbeda pada font teks dengan garis vertikal dan serangkaian kotak yang menandai setiap momen penting dari timeline.
Garis waktu vertikal
Garis waktu interval itu menjauhkan dirinya dari yang lain dengan sentuhan visualnya. Ini memiliki latar belakang gradien terkini dalam desain dan serangkaian kotak yang menandai masing-masing interval tersebut. Diprogram dalam CSS dan HTML.
Garis waktu di Flexbox
Salah satu garis waktu selesai terbaik dan itu didasarkan pada kartu untuk memasukkan semua informasi yang kami butuhkan untuk interval waktu tersebut. Juga dikembangkan dalam HTML dan CSS, harus diperhatikan bahwa semua kartu harus memiliki tinggi dan lebar yang sama untuk menghitung ruang untuk layar yang lebih besar.
Garis waktu di DIV
Garis waktu minimalis dalam desain dan yang telah dikembangkan hanya dalam HTML dan CSS, jadi implementasinya bisa sangat cepat. Ini sangat cocok untuk mengekspresikan garis waktu dalam media informasi karena hasil akhir monokromnya.
Garis waktu di CSS dan HTML
Anda bisa menempatkan Gambar berukuran 400 × 300 dalam timeline ini dibedakan dengan warna hijau pada garis dan teks tanggal dan hari. Ini tidak memiliki animasi dan agak ditandai dengan desainnya yang sederhana di semua tingkatan.
Timeline komentar dan umpan balik
Garis waktu yang sangat berbeda dari yang lain untuk memungkinkan taruh kartu dengan foto pengguna, atau setidaknya itulah niat awalnya. Dengan gaya visual yang bagus, kartu menggunakan bayangan untuk garis waktu yang agak datar tanpa animasi.
Timeline pagi di HTML dan CSS
Garis waktu yang sempurna untuk responsif itu itu ditandai dengan HTML, CSS dan menawarkan garis waktu yang cukup sederhana namun sangat seluler.
UI garis waktu
Kode dalam HTML dan CSS ini berfungsi dengan sempurna menyajikan hari kerja dari latihan. Ini responsif dengan gambar header dan serangkaian tombol yang menunjukkannya dengan sangat jelas dan bersih dalam aspek visual.
Garis waktu hanya di CSS
Garis waktu ini ditandai dengan berada di CSS dan oleh a seri warna yang dipilih dengan baik: merah dan hijau. Hijau untuk menutupi seluruh halaman sepenuhnya, putih untuk teks dan garis pemisah, dan merah untuk membedakan interval waktu kita. Kita dapat mengklik setiap interval untuk menempatkannya dengan kotak yang mengelilinginya dan menyorotnya.
Timeline responsif V3
Garis waktu horizontal pertama dalam daftar di HTML, CSS, dan JavaScript. Secara visual menonjol untuk file penggunaan warna hitam dan abu-abu untuk menempatkan garis horizontal dengan serangkaian titik. Setiap interval disorot dengan bobot yang lebih besar pada sumber dan konten teks.
Garis waktu bersarang dalam warna
Salah satu garis waktu horizontal kualitas visual tertinggi dalam daftar. Garis waktu interaktif yang baik dengan animasi yang sangat halus dan disajikan dengan baik untuk menawarkan pengalaman pengguna yang luar biasa setiap kali salah satu interval waktu ditekan. Itu dibuat dengan HTML CSS / Sass dan JavaScript / TypeScript (jquery.js).
Garis waktu sejarah responsif
Garis waktu yang sempurna untuk menunjukkan berbagai peristiwa dalam gambar dari slot waktu dalam sejarah. Ini horizontal dan responsif telah dikembangkan dalam HTML, CSS dan JavaScript.
Garis waktu grup
Garis waktu ini menonjol untuk transisi yang baik dilakukan dengan animasi horizontal. Dengan warna yang bagus dan desain yang sangat indah untuk menonjolkan setiap interval waktu. Ada dalam HTML, CSS dan JavaScript untuk menampilkan serangkaian kartu yang ditumpangkan pada gambar latar belakang yang representatif.
Garis waktu CSS dan HTML horizontal
Dibuat olehnya dikenal Envato Tuts +, kami disajikan dengan garis waktu horizontal dengan serangkaian kartu bersih dan dasar dalam desain. Warna datar dan garis horizontal dengan serangkaian titik merah yang saling mengunci setiap interval.
Timeline CSS, HTML dan slick.js
Nada pastel di desain untuk timeline itu menonjol untuk presentasi dari setiap gambar menampilkan setiap interval waktu. Ini adalah transisi antara masing-masing gambar dan interval yang membuat garis waktu ini menonjol.
Urutan garis waktu V1
Garis waktu yang menonjol tombol pada setiap garis vertikal dari setiap interval untuk menghubungkan gambar latar belakang layar penuh setiap kali kita menekan satu.
CSS HTML garis waktu horizontal
Anda tidak akan dapat mengeklik di mana pun pada garis waktu ini yang disorot oleh a desain indah dengan pilihan palet warna yang bijak dan serangkaian sandwich untuk setiap garis waktu. Tidak ada animasi, tapi secara visual sangat enak dipandang.
Garis Waktu Codyhouse
Garis waktu ini yang disajikan oleh Codyhouse adalah warna tunggal dalam desain dan dikembangkan dalam HTML, CSS dan JavaScript. Ini menghadirkan garis minimalis dengan serangkaian titik sebagai interval untuk diklik dan menyebabkan animasi horizontal kurang dari setengah detik. Sederhana, tapi kuat.
Garis waktu horizontal
Garis waktu lain dibuat dalam HTML, CSS, dan JavaScript. Ditandai dengan satu warna, berisi desain yang elegan dengan warna hijau untuk meletakkan renda di setiap titik yang mewakili interval waktu. Setiap kali kita menekan satu, animasi samping yang sangat halus dimulai.
Timeline tanpa nama
Garis waktu hitam hanya dari daftar bawah. Lalu dia menggunakan warna yang berbeda untuk membedakan setiap tahun dan teks pada saat yang sama dengan batasnya. Ini memiliki animasi yang menonjol untuk melewati masing-masing teks.
Linimasa
Garis waktu ini menempatkan aksen pada warna hijau menjadi benar-benar statis.
Garis waktu horizontal lainnya
Hal ini dapat tempatkan gambar di dekat layar penuh untuk garis waktu yang menonjol karena penggunaan corak biru dan abu-abu ditambah serangkaian lingkaran yang mewakili setiap tahun.
Jangan lewatkan rangkaian menu lain dalam CSS dan HTML.