Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery

Cara Membangun Indikator Kemajuan Gulir Halaman dengan jQuery dan SVG

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Hari ini kita akan melihat beberapa teknik yang dapat kita gunakan untuk menunjukkan kemajuan gulir bagi pengguna yang membaca halaman. Teknik ini digunakan pada peningkatan jumlah situs, dan untuk alasan yang bagus; ini memberikan pemahaman kontekstual tentang investasi yang diperlukan untuk mengkonsumsi halaman tertentu. Saat pengguna menggulir, mereka disajikan dengan rasa kemajuan saat ini dalam berbagai format.

Seperti yang terlihat di ia.net

Hari ini, kami akan membahas dua teknik khusus yang dapat Anda terapkan untuk menunjukkan kemajuan gulir, dan memberi Anda alat untuk membuat milik Anda sendiri. Mari kita mulai!

Menyiapkan Dokumen

Pertama, kita akan membuat dokumen tiruan yang akan bertindak sebagai halaman posting kita. Kita akan menggunakan normalize.css dan jQuery, serta font Google. File HTML kosong Anda akan terlihat seperti ini:

Selanjutnya, kita akan menambahkan konten posting palsu kita:

Ini memberi kita cukup konten untuk menguji perilaku gulir kita.

Penataan Dasar

Kita akan menggunakan gaya dasar untuk membuat postingan kita sedikit lebih menarik.

Perhitungan Posisi Gulir

Untuk menghitung posisi gulir kita, kita perlu memahami secara konseptual apa yang kita lacak. Karena JavaScript hanya dapat melacak nilai gulir teratas, kita perlu melacak nilai gulir dari 0 (di bagian atas, bukan yang digulir) ke nilai gulir akhir apa pun. Nilai gulir akhir akan sama dengan total panjang dokumen dikurangi tinggi dari jendela itu sendiri (karena dokumen akan bergulir sampai bagian bawah dokumen mencapai bagian bawah jendela).

Kita akan menggunakan JavaScript berikut untuk menghitung posisi gulir ini.

Kode di atas menetapkan tinggi jendela dan tinggi body, dan ketika pengguna menggulirnya menggunakan nilai-nilai tersebut untuk menetapkan variabel perc (singkatan percentage). Kami juga menggunakan Math.min dan Math.max untuk membatasi nilai ke rentang 0-100.

Dengan perhitungan persentase ini, kita dapat mendorong indikator kemajuan.

Indikator Lingkaran

Indikator pertama yang akan kita buat adalah lingkaran SVG. Kita akan menggunakan properti SVG stroke-dasharray dan stroke-dashoffset untuk menunjukkan kemajuan. Pertama, mari tambahkan indikator kemajuan ke dokumen.

Markup ini memberi kita dua lingkaran dalam SVG, serta div yang berisi untuk menunjukkan jumlah persentase kita. Kita perlu menambahkan gaya pada elemen-elemen ini juga, dan kemudian kita akan menjelaskan bagaimana lingkaran ini diposisikan dan dianimasikan.

Gaya ini mengatur kita untuk menganimasikan elemen lingkaran kita. Kemajuan kita harus selalu terlihat, jadi kita menetapkan posisi menjadi fixed pada kelas .progress-indicator , dengan aturan posisi dan ukuran. Kita juga mengatur kemajuan perhitungan kita untuk dipusatkan secara vertikal dan horizontal di dalam div ini.

Lingkaran ditempatkan di pusat menggunakan transform pada elemen SVG itu sendiri. Kita memulai pusat lingkaran kita menggunakan transform. Kita menggunakan teknik di sini yang memungkinkan kita untuk menerapkan rotasi dari pusat lingkaran kita untuk memulai animasi di bagian atas lingkaran (bukan di sisi kanan lingkaran). Di SVG, transforms diterapkan dari kiri atas elemen. Inilah sebabnya mengapa kita harus memusatkan lingkaran kita pada 0, 0, dan memindahkan pusat lingkaran ke pusat SVG itu sendiri dengan menggunakan translate(50, 50).

Menggunakan stroke-dasharray dan stroke-dashoffset

Properti stroke-dasharray dan stroke-dashoffset memungkinkan kita menganimasikan stroke dari SVG. stroke-dasharray mendefinisikan potongan stroke yang terlihat. stroke-dashoffset menggerakkan awal stroke. Semua atribut ini memungkinkan kita untuk membuat proses "keyframing" stroke.

Memperbarui stroke-dasharray pada Scroll

Selanjutnya, kita akan menambahkan fungsi untuk memperbarui stroke-dasharray pada gulir, menggunakan persentase kemajuan kita yang sebelumnya ditampilkan.

Offset yang cocok dengan lingkaran kita adalah sekitar 126. Penting untuk dicatat bahwa ini tidak akan berfungsi untuk semua lingkaran, karena 126 adalah tentang keliling lingkaran dengan radius 20. Untuk menghitung stroke-dashoffset untuk lingkaran tertentu, kalikan radius dengan 2PI. Dalam kasus kita, offset yang tepat adalah 20 * 2PI = 125.66370614359172.

Variasi Kemajuan Horizontal

Untuk contoh berikut, kita akan membuat bilah horizontal sederhana yang dipasang di bagian atas jendela. Untuk mencapai ini, kita akan menggunakan div indikator kemajuan kosong.

Catatan: kami telah menambahkan "-2" untuk memungkinkan kami menyertakan contoh ini dalam file CSS yang sama.

Selanjutnya, kita akan menambahkan gaya kita untuk elemen ini.

Akhirnya, kita akan mengatur lebar bilah kemajuan pada gulir.

Semua bersama-sama, JavaScript terakhir kita akan terlihat seperti ini:

Gagasan Lain untuk Bilah Kemajuan

Artikel ini dimaksudkan untuk memberi Anda alat dan inspirasi untuk merancang solusi kemajuan gulir Anda sendiri. Ide-ide lain untuk bilah kemajuan mungkin termasuk menggunakan istilah lebih deskriptif atau manusiawi untuk indikasi kemajuan itu sendiri, seperti "setengah jalan di sana" atau "baru memulai". Beberapa implementasi (seperti contoh ia.net yang ditunjukkan sebelumnya) menggunakan estimasi waktu baca artikel. Ini dapat diperkirakan menggunakan kode yang serupa dengan yang berikut:

Anda kemudian akan menggunakan minCount bersama dengan variabel perc yang kita perbarui pada gulir untuk menunjukkan kepada pembaca sisa waktu mereka untuk membaca artikel. Berikut ini implementasi yang sangat mendasar dari konsep ini.

Satu Bagian Akhir: Ukuran Layar Adaptif

Untuk memastikan bahwa indikator kemajuan kita berfungsi sebagaimana mestinya, kita harus memastikan matematika kita menghitung hal yang tepat pada waktu yang tepat. Agar hal itu terjadi, kita perlu memastikan bahwa kita menghitung ulang ketinggian dan memperbarui indikator kemajuan saat pengguna mengubah ukuran jendela. Berikut adalah adaptasi JavaScript untuk mewujudkannya:

Kode ini mendeklarasikan fungsi yang mengatur variabel yang kita perlukan untuk menghitung kemajuan pada ukuran layar yang diberikan, dan memanggil fungsi tersebut saat mengubah ukuran. Kita juga memicu kembali gulir pada perubahan ukuran jendela sehingga fungsi updateProgress kita dijalankan.

Anda Sudah Mencapai Akhir!

Setelah meletakkan fondasi untuk sejumlah varian, apa yang bisa Anda hasilkan? Indikator kemajuan apa yang Anda lihat yang berfungsi? Bagaimana dengan indikator yang buruk untuk digunakan? Bagikan pengalaman Anda bersama kami di komentar!

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.