Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Animation
Code

Buat Carousel Yang Sempurna, Bagian 2

by
Difficulty:AdvancedLength:MediumLanguages:
This post is part of a series called Create the Perfect Carousel.
Create the Perfect Carousel, Part 1
Create the Perfect Carousel, Part 3

Indonesian (Bahasa Indonesia) translation by Rohmat Trimanto (you can also view the original English article)

Selamat datang kembali di seri tutorial Create the Perfect Carousel. Kami membuat Carousel yang dapat diakses dan menyenangkan menggunakan JavaScript dan fisika Popmotion, tween, dan kemampuan pelacakan input.

Di bagian 1 tutorial kami, kami melihat bagaimana Amazon dan Netflix telah menciptakan komidi putar mereka dan mengevaluasi pro dan kontra dari pendekatan mereka. Dengan pembelajaran kami, kami memutuskan strategi untuk komidi putar kami dan menerapkan pengguliran sentuhan menggunakan fisika.

Di bagian 2, kita akan menerapkan gulir mouse horizontal. Kami juga akan melihat beberapa teknik pagination umum dan menerapkannya. Akhirnya, kita akan menghubungkan bilah kemajuan yang akan menunjukkan seberapa jauh melalui Carousel pengguna.

Anda dapat memulihkan titik penyimpanan Anda dengan membuka CodePen ini, yang mengambil tempat kami tinggalkan.

Gulir Mouse Horisontal

Jarang carousel JavaScript menghargai gulir mouse horizontal. Ini memalukan: pada laptop dan mouse yang menerapkan pengguliran horizontal berbasis momentum, ini adalah cara tercepat untuk menavigasi korsel. Seburuk memaksa pengguna sentuh untuk bernavigasi melalui tombol daripada menggesek.

Untungnya, ini dapat diimplementasikan hanya dalam beberapa baris kode. Di akhir fungsi carousel Anda, tambahkan pendengar acara baru:

Di bawah acara startTouchScroll Anda, tambahkan fungsi rintisan bernama onWheel:

Sekarang, jika Anda menjalankan roda gulir di atas korsel dan memeriksa panel konsol Anda, Anda akan melihat jarak roda pada output sumbu x.

Seperti halnya sentuhan, jika gerakan roda sebagian besar vertikal, halaman harus bergulir seperti biasa. Jika horisontal, kami ingin menangkap gerakan roda dan menerapkannya pada Carousel. Jadi, di onWheel, ganti console.log dengan:

Blok kode ini akan menghentikan gulir halaman jika gulir itu horisontal. Memperbarui x offset slider kami sekarang hanyalah masalah mengambil properti deltaX acara dan menambahkannya ke nilai sliderX kami saat ini:

Kami menggunakan kembali fungsi clampXOffset kami sebelumnya untuk membungkus perhitungan ini dan memastikan Carousel tidak menggulir melampaui batas yang diukur.

Aside on Throttling Scroll Events

Setiap tutorial yang bagus yang berhubungan dengan acara masukan akan menjelaskan betapa pentingnya untuk menutup acara tersebut. Ini karena gulir, mouse, dan acara sentuh dapat menyala lebih cepat dari kecepatan bingkai perangkat.

Anda tidak ingin melakukan pekerjaan intensif sumber daya yang tidak perlu seperti merender Carousel dua kali dalam satu bingkai, karena ini adalah pemborosan sumber daya dan cara cepat untuk membuat antarmuka yang terasa lamban.

Tutorial ini belum menyentuh itu karena penyaji yang disediakan oleh Popmotion menerapkan Framesync, penjadwal pekerjaan kecil yang disinkronkan dengan bingkai. Ini berarti Anda dapat memanggil (v) => sliderRenderer.set ('x', v) beberapa kali berturut-turut, dan rendering yang mahal hanya akan terjadi sekali, pada frame berikutnya.

Pagination

Gulir selesai. Sekarang kita perlu menyuntikkan beberapa kehidupan ke tombol navigasi yang sampai sekarang belum dicintai.

Sekarang, tutorial ini adalah tentang interaksi, jadi silakan merancang tombol-tombol ini sesuai keinginan. Secara pribadi, saya menemukan panah arah lebih intuitif (dan sepenuhnya terinternasionalisasi secara default!).

Bagaimana Seharusnya Pagination Bekerja?

Ada dua strategi jelas yang bisa kita ambil saat membuat korsel: item demi item atau item yang dikaburkan pertama kali. Hanya ada satu strategi yang benar, tetapi, karena saya sudah sering melihat yang lain diimplementasikan, saya pikir perlu menjelaskan mengapa itu salah.

1. Item demi Item

Item By Item Example

Cukup mengukur x offset item berikutnya dalam daftar dan menghidupkan rak dengan jumlah itu. Ini adalah algoritma yang sangat sederhana yang saya asumsikan dipilih karena kesederhanaannya daripada ramah pengguna.

Masalahnya adalah sebagian besar layar akan dapat menampilkan banyak item sekaligus, dan orang-orang akan memindai semuanya sebelum mencoba menavigasi.

Rasanya lamban, jika tidak langsung frustasi. Satu-satunya situasi di mana ini akan menjadi pilihan yang baik adalah jika Anda tahu item di carousel Anda memiliki lebar yang sama atau hanya sedikit lebih kecil dari area yang dapat dilihat.

Namun, jika kita melihat beberapa item, lebih baik kita menggunakan metode item yang dikaburkan pertama:

2. Item yang dikaburkan pertama kali

The First Obscured Item

Metode ini hanya mencari item yang dikaburkan pertama di arah kita ingin memindahkan Carousel, mengambil x offsetnya, dan kemudian gulir ke sana.

Dengan melakukan itu, kami menarik jumlah maksimum item baru yang bekerja dengan asumsi bahwa pengguna telah melihat semua yang ada saat ini.

Karena kami menarik lebih banyak item, komidi putar membutuhkan lebih sedikit klik untuk bernavigasi. Navigasi yang lebih cepat akan meningkatkan keterlibatan dan memastikan pengguna Anda melihat lebih banyak produk Anda.

Pendengar Acara

Pertama, mari kita mengatur pendengar acara kami sehingga kami dapat mulai bermain-main dengan pagination.

Pertama-tama kita harus memilih tombol sebelumnya dan berikutnya. Di bagian atas fungsi carousel, tambahkan:

Kemudian, di bagian bawah fungsi carousel, tambahkan pendengar acara:

Terakhir, tepat di atas blok pendengar acara Anda, tambahkan fungsi yang sebenarnya:

goto adalah fungsi yang akan menangani semua logika untuk pagination. Hanya dibutuhkan angka yang mewakili arah perjalanan yang ingin kita hentikan. gotoNext dan gotoPrev cukup memanggil fungsi ini masing-masing dengan 1 atau -1.

Menghitung "Halaman"

Seorang pengguna dapat dengan bebas menggulir carousel ini, dan ada n item di dalamnya, dan carousel itu mungkin diubah ukurannya. Jadi konsep halaman tradisional tidak langsung berlaku di sini. Kami tidak akan menghitung jumlah halaman.

Sebagai gantinya, ketika fungsi goto dipanggil, kita akan melihat ke arah delta dan menemukan item pertama yang sebagian dikaburkan. Itu akan menjadi item pertama di "halaman" berikutnya.

Langkah pertama adalah mendapatkan x offset saat ini dari slider kami, dan menggunakannya dengan lebar slider yang terlihat penuh untuk menghitung offset "ideal" yang ingin kami gulir. Offset yang ideal adalah apa yang akan kita gulir jika kita naif terhadap konten slider. Ini memberikan tempat yang bagus bagi kami untuk mulai mencari item pertama kami.

Kita dapat menggunakan optimasi nakal di sini. Dengan memberikan targetX kami ke fungsi clampXOffset yang kami buat di tutorial sebelumnya, kita dapat melihat apakah outputnya berbeda dengan targetX. Jika ya, itu berarti targetX kami berada di luar batas yang dapat digulir, jadi kami tidak perlu mencari tahu item terdekat. Kami hanya gulir ke ujung.

Menemukan Barang Terdekat

Penting untuk dicatat bahwa kode berikut berfungsi dengan asumsi bahwa semua item dalam carousel anda berukuran sama. Berdasarkan asumsi itu, kita dapat membuat optimisasi seperti tidak harus mengukur ukuran setiap item. Jika ukuran item Anda itu berbeda, ini masih akan menjadi titik awal yang baik.

Di atas fungsi goto Anda, tambahkan fungsi findClosestItemOffset yang dirujuk dalam cuplikan terakhir:

Pertama, kita perlu tahu seberapa luas barang kita dan jarak antara mereka. Metode Element.getBoundingClientRect () dapat memberikan semua informasi yang kita butuhkan. Untuk width, kita cukup mengukur elemen item pertama. Untuk menghitung jarak antar item, kita bisa mengukur offset right item pertama dan offset left item kedua, lalu kurangi yang pertama dari item terakhir:

Sekarang, dengan variabel targetX dan delta yang kami lewati ke fungsi, kami memiliki semua data yang kami butuhkan untuk dengan cepat menghitung offset untuk menggulir ke.

Perhitungannya adalah untuk membagi nilai targetX absolut dengan width + spacing. Ini akan memberi kami jumlah item yang tepat yang bisa kami muat dalam jarak itu.

Kemudian, bulatkan ke atas atau ke bawah tergantung pada arah pagination (delta kami). Ini akan memberi kita jumlah barang lengkap yang bisa kita muat.

Akhirnya, gandakan jarak dengan width + spacing untuk memberi kita offset flush dengan item lengkap.

Hidupkan Pagination

Sekarang kita telah menghitung targetX kita, kita dapat menghidupkannya! Untuk ini, kita akan menggunakan pekerja keras animasi web, tween.

Bagi yang belum tahu, "tween" adalah kependekan dari keduanya. Dua belas perubahan dari satu nilai ke nilai lain, selama durasi waktu yang ditentukan. Jika Anda telah menggunakan transisi CSS, ini adalah hal yang sama.

Ada sejumlah manfaat (dan kekurangan!) Untuk menggunakan JavaScript di atas CSS untuk remaja. Dalam contoh ini, karena kita juga menghidupkan sliderX dengan input fisika dan pengguna, akan lebih mudah bagi kita untuk tetap berada dalam alur kerja ini untuk tween.

Ini juga berarti bahwa nanti kita dapat memasang progress bar dan itu akan bekerja secara alami dengan semua animasi kita, gratis.

Kami pertama-tama ingin mengimpor tween dari Popmotion:

Di akhir fungsi goto kami, kami dapat menambahkan tween kami yang menjiwai dari currentX ke targetX:

Secara default, Popmotion menetapkan duration hingga 300 milidetik dan ease ke easing.easeOut. Ini telah dipilih secara khusus untuk memberikan nuansa responsif terhadap animasi yang merespons input pengguna, tetapi jangan ragu untuk bermain-main dan melihat apakah Anda menemukan sesuatu yang lebih cocok dengan nuansa merek Anda.

Indikator Kemajuan

Sangat berguna bagi pengguna untuk memiliki beberapa indikasi tentang di mana mereka berada. Untuk ini, kita dapat menghubungkan indikator kemajuan.

Bilah kemajuan Anda dapat ditata dengan beberapa cara. Untuk tutorial ini, kami telah membuat div berwarna, tinggi 5px, yang membentang antara tombol sebelumnya dan berikutnya. Ini adalah cara kami menghubungkan ini ke kode kami dan menghidupkan bilah yang penting dan merupakan fokus tutorial ini.

Anda belum melihat indikatornya karena pada awalnya kami menatanya dengan transform: scaleX(0). Kami menggunakan transformasi scale untuk menyesuaikan lebar bilah karena, seperti yang kami jelaskan di bagian 1, transformasi lebih performan daripada mengubah properti seperti left atau, dalam hal ini, width.

Itu juga memungkinkan kita untuk dengan mudah menulis kode yang menetapkan skala sebagai persentase: nilai sliderX saat ini antara minXOffset dan maxXOffset.

Mari kita mulai dengan memilih div.progress-bar kita setelah memilih previousButton kita:

Setelah kami mendefinisikan sliderRenderer, kami dapat menambahkan renderer untuk progressBar:

Sekarang mari kita mendefinisikan fungsi untuk memperbarui scaleX dari progress bar.

Kami akan menggunakan fungsi calc yang disebut getProgressFromValue. Ini membutuhkan rentang, dalam kasus min dan maxXOffset kami, dan nomor ketiga. Ini mengembalikan kemajuan, angka antara 0 dan 1, dari angka ketiga itu dalam rentang yang diberikan.

Kami telah menulis kisaran di sini sebagai maxXOffset, minXOffset ketika, secara intuitif, harus dibalik. Ini karena x adalah nilai negatif, dan maxXOffset juga merupakan nilai negatif sedangkan minXOffset adalah 0. 0 secara teknis lebih besar dari dua angka, tetapi nilai yang lebih kecil sebenarnya mewakili offset maksimum. Negatif, ya?

Kami ingin agar indikator kemajuan diperbarui sejalan dengan sliderX, jadi mari kita ubah baris ini:

Ke baris ini:

Sekarang, kapan pun sliderX memperbarui, demikian juga bilah progres.

Kesimpulan

Itu saja untuk angsuran ini! Anda dapat mengambil kode terbaru pada CodePen ini. Kami telah berhasil memperkenalkan penggulir roda horizontal, pagination, dan bilah kemajuan.

Carousel dalam kondisi yang cukup baik sejauh ini! Dalam angsuran terakhir, kita akan melangkah lebih jauh. Kami akan membuat carousel sepenuhnya dapat diakses keyboard untuk memastikan siapa pun dapat menggunakannya.

Kami juga akan menambahkan beberapa sentuhan menarik menggunakan tarikan yang didukung pegas saat pengguna mencoba menggulirkan komidi putar melewati batasnya menggunakan scroll sentuh atau pagination.

Sampai jumpa!

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.