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:
- jQuery. Unduh versi terbaru dari jQuery Download
- NiceScroll. Unduh dari GitHub
- File Cursor (kita akan hotlink dari Google)
Namun sebelum masuk tutorial, ada beberapa poin yang harus saya singgung, yaitu :
- 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.
- 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.
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
.
Kemudian untuk parameter, gunakan kode berikut:
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:
Lalu pada dokumen HTML, sisipkan javascript berikut ke dalam tag body
:
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
ternyata pake itu toh, keren.. coba dulu :D
wahh bagus juga ni.. boleh di coba ni.. :)
wah sip sip, pgen nyoba dulu aku
makasih buat tutorialnya.
wah.. sip2
kebetulan lgi butuh…ehh.. liat artikel nih ._.
kira kira ada g javascript tombol up, down, left, right ?
contohnya pass klik tombol down otomatis turun beberapa terajat…
>> http://jsfiddle.net/EB4UC/2/
saya sudah coba tidk tidak bisa
#saya memakai blogger
Coba gabungkan dengan scrollwheel.js mas
cara gabungkan gimna mas??
$(document).ready(
function() {
$(“html”).niceScroll({touchbehavior:true});
}
);
$(‘#left’).click(function () {
var leftPos = $(‘div.outer_container’).scrollLeft();
console.log(leftPos);
$(“div.outer_container”).animate({
scrollLeft: leftPos – 200
}, 800);
});
$(‘#right’).click(function () {
var leftPos = $(‘div.outer_container’).scrollLeft();
console.log(leftPos);
$(“div.outer_container”).animate({
scrollLeft: leftPos + 200
}, 800);
});
??
Hmm….Mangstab2 coba deh (y)
Ini bisa di pasang di blog.?
Keren nih, tapi belum begitu paham JavaScript
bisa :)
tapi susah juga kalo diterapin di blog yang isinya tutorial
orang ga bisa ngeklik dan copas code-nya