Tutorial Web Design

Memasang fitur Click & Drag untuk menggantikan scrollbar browser sudah menjadi trend saat ini, apalagi dengan semakin maraknya penggunaan tablet PC, teknik ini semakin berkembang dan banyak di implementasikan diberbagai website.

Seminggu yang lalu, saya mendesain ulang tampilan situs pribadi saya menjadi lebih sederhana, serta menambahkan blog. Namun karena tampilannya sederhana, saya tidak ingin situs/blog saya terlihat “belum jadi”.

Karena itu saya menambahkan beberapa fitur. Salah satunya adalah fitur click and drag untuk menggantikan fungsi scrollbar browser. Fitur click and drag sistem kerjanya sama dengan fitur swipe di perangkat touchscreen.

Tertarik untuk memasangnya di situs/blog anda juga? Ikuti tutorial yang sangat mudah berikut.

Resource:

Kita akan membutuhkan beberapa resource berikut:

1. jQuery. Unduh versi terbaru dari jQuery Download
2. NiceScroll. Unduh dari GitHub
3. File Cursor (kita akan hotlink dari Google)

Namun sebelum masuk tutorial, ada beberapa poin yang harus saya singgung, yaitu :

1. Khusus untuk WordPress. NiceScroll semestinya bisa bekerja di jQuery v.1.5 sampai v.1.9. Namun pada prakteknya, NiceScroll tidak bisa bekerja di jQuery v.1.8.3 bawaan WordPress (v.3.5.1). Saya tidak menyarankan anda untuk mengganti jQuery WordPress dengan jQuery v.1.9, karena itu akan membuat banyak fungsi dan plugin WordPress tidak bisa bekerja. Namun kalau anda penasaran, silahkan anda coba utak-atik sendiri.
2. Dengan fitur click and drag, maka seleksi teks (blok teks) menjadi tidak mungkin bisa dilakukan. Jadi kalau situs/blog anda membutuhkan seleksi teks, lewati parameter “touchbehavior:true” dalam tutorial ini. Konsekuensinya, anda tidak akan mendapatkan fitur click and drag, tapi scrolling halaman anda akan terlihat lebih halus dan menarik.

Image by Ebayink

HTML

Pada dasarnya, ini bisa diterapkan di semua dokumen HTML. Bahkan yang anda miliki saat ini (bagi pemilik situs/blog). Hanya saja pastikan tidak ada jQuery lain untuk menghindari bentrok.

Sisipkan kode untuk memanggil jQuery ke dalam dokumen HTML, tepat di atas tag /body.

<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.nicescroll.min.js"></script>

Kemudian untuk parameter, gunakan kode berikut:

$(document).ready(
	function() {
        	$("html").niceScroll({touchbehavior:true});
        }
);

Parameter lengkapnya ada di situs pengembang atau bisa download file yang disediakan.

Cursor

Saat ini, halaman situs/blog anda sudah memiliki fitur click and drag. Namun, ada satu hal yang mengganggu saya, yaitu cursor tidak berubah menjadi “grab” ketika kita “drag” halaman. Untuk itu, mari kita tambahkan cursor grab dengan CSS dan javascript.

Pada file CSS anda, sisipkan stylesheet berikut:

.hand {
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
.grab {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

Lalu pada dokumen HTML, sisipkan javascript berikut ke dalam tag body :

onmouseup="this.className='hand'" onmousedown="this.className='grab'"

Dan selesai. Silahkan refresh dokumen anda, dan nikmati fitur baru dari situs/blog anda.

Hasil

Berikut adalah hasil dari tutorial di atas.

Demo | Download

Image by : ebayink