Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Buat Carousel Perfect, Bahagian 1

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Create the Perfect Carousel.
Create the Perfect Carousel, Part 2

Malay (Melayu) translation by Muhamad Zulfiqor (you can also view the original English article)

Carousels adalah ruas penstriman dan tapak e-dagang. Kedua-dua Amazon dan Netflix menggunakannya sebagai alat navigasi terkemuka. Dalam tutorial ini, kami akan menilai reka bentuk interaksi kedua-duanya, dan menggunakan penemuan kami untuk melaksanakan karusel yang sempurna.

Dalam siri tutorial ini, kami juga akan mempelajari beberapa fungsi Popmotion, enjin gerakan JavaScript. Ia menawarkan alat animasi seperti tweens (berguna untuk penomboran), penjejakan penunjuk (untuk menatal), dan fizik musim bunga (untuk sentuhan akhir yang menyeronokkan.)

Bahagian 1 akan menilai bagaimana Amazon dan Netflix telah melaksanakan penggiliran. Kami kemudian akan melaksanakan karusel yang boleh ditatal melalui sentuhan.

Menjelang akhir siri ini, kami akan melaksanakan tatal roda dan sentuh touchpad, penomboran, bar kemajuan, navigasi keyboard, dan beberapa sentuhan kecil menggunakan fizik musim bunga. Kami juga akan terdedah kepada beberapa komposisi fungsional asas.

Sempurna?

Apa yang diperlukan untuk karusel menjadi 'sempurna'? Ia perlu diakses oleh:

  • Mouse: Ia harus menawarkan butang sebelumnya dan seterusnya yang mudah untuk klik dan tidak mengaburkan kandungan.
  • Touch: Ia mesti menjejaki jari, dan kemudian tatal dengan momentum yang sama seperti apabila jari mengangkat dari skrin.
  • Scroll wheel: Sering diabaikan, Apple Magic Mouse dan banyak trackpad komputer riba menawarkan menatal mendatar yang halus. Kita harus menggunakan keupayaan itu!
  • Keyboard: Ramai pengguna memilih untuk tidak, atau tidak dapat menggunakan tetikus untuk navigasi. Adalah penting kita membuat karusel kita boleh diakses supaya pengguna boleh menggunakan produk kami juga.

Akhirnya, kami akan mengambil langkah-langkah yang lebih jauh lagi dan menjadikan ini UX dengan yakin dan menyenangkan dengan membuat karusel bertindak balas dengan jelas dan mendalam dengan fizik musim bunga apabila gelangsar telah mencapai hujungnya.

Persediaan

Pertama, mari kita dapatkan HTML dan CSS yang diperlukan untuk membina karusel asas dengan membuat kod CodePen ini.

Pen ini telah ditubuhkan dengan Sass untuk memproses CSS dan Babel terlebih dahulu untuk pemindahan JavaScript ES6. Saya juga termasuk Popmotion, yang boleh diakses dengan window.popmotion

Anda boleh menyalin kod ke projek tempatan jika anda lebih suka, tetapi anda perlu memastikan persekitaran anda menyokong Sass dan ES6. Anda juga perlu memasang Popmotion dengan npm install popmotion.

 Membuat Korsel Baru

Pada mana-mana halaman, kami mungkin mempunyai banyak carousels. Oleh itu, kita memerlukan kaedah untuk merangkum keadaan dan fungsi masing-masing.

Saya akan menggunakan factory function dan bukan class. Factory function mengelakkan keperluan untuk menggunakan kata kunci this yang sering mengelirukan ini dan akan mempermudah kod untuk tujuan tutorial ini.

Dalam editor JavaScript anda, tambah fungsi mudah ini:

Kami akan menambah kod karusel khusus kami di dalam fungsi carousel ini.

The Hows and Whys of Scrolling

Tugas pertama kami ialah membuat skrol karusel. Terdapat dua cara yang boleh kita lakukan:

Menatal Penyemak Imbas Native

Penyelesaian yang jelas adalah untuk menetapkan overflow-x: scroll pada slider. Ini akan membolehkan penggiliran asli pada semua pelayar, termasuk peranti roda tetikus sentuhan dan mendatar.

Walau bagaimanapun, ada kelemahan untuk pendekatan ini:

  • Kandungan di luar bekas tidak dapat dilihat, yang boleh menjadi ketat untuk reka bentuk kami.
  • Ia juga menghadkan cara kita boleh menggunakan animasi untuk menunjukkan bahawa kita telah mencapai akhir.
  • Pelayar desktop akan mempunyai bar tatal mendatar (walaupun boleh diakses!).

Secara alternatif:

Animasi translateX

Kita juga boleh menghidupkan sifat translateX karusel. Ini akan sangat serba boleh kerana kami dapat melaksanakan dengan tepat reka bentuk yang kami suka. translateX juga sangat berprestasi, kerana tidak seperti hak cipta CSS left yang dapat ditangani oleh GPU peranti ini.

Di sisi negatifnya, kita perlu mengaktifkan semula fungsi menatal menggunakan JavaScript. Itu lebih banyak kerja, lebih banyak kod.

Bagaimana Melancarkan Pendekatan Amazon dan Netflix?

Kedua-dua carousel Amazon dan Netflix membuat pembezaan yang berbeza dalam menghampiri masalah ini.

Amazon menghidupkan harta carousel's left semasa dalam mod 'desktop'. Menggokalkan left adalah pilihan yang sangat miskin, memandangkan perubahan itu mencetuskan pengiraan semula susun atur. Ini adalah CPU-intensif, dan mesin yang lebih tua akan berjuang untuk memukul 60fps.

Siapa pun yang membuat keputusan untuk menghidupkan left daripada translateX mestilah bodoh sebenar (spoiler: ia adalah saya, kembali pada tahun 2012. Kami tidak seperti yang diterangi pada masa itu.)

Apabila ia mengesan peranti sentuh, karusel menggunakan menatal semula asli penyemak imbas. Masalah dengan hanya membolehkannya dalam mod 'mudah alih' ialah pengguna desktop dengan roda tatal mendatar ketinggalan. Ia juga bermaksud apa-apa kandungan di luar karusel perlu dipotong secara visual:

Screenshot of Amazon illustrating lack of design bleed

Netflix betul menghidupkan sifat translateX karusel, dan ia berbuat demikian pada semua peranti. Ini membolehkan mereka mempunyai reka bentuk yang berdarah di luar karusel:

Screenshot of Netflix carousel illustrating design bleed

Ini, seterusnya, membolehkan mereka membuat reka bentuk yang mewah di mana item dibesarkan di luar tepi x dan y karusel dan barang-barang di sekelilingnya bergerak keluar dari jalan mereka:

Screenshot of Netflix carousel illustrating enlarged item

Malangnya, pengimplementasian Netflix menatal untuk peranti sentuh tidak memuaskan: ia menggunakan sistem penomboran berasaskan gerakan yang merasakan perlahan dan rumit. Tidak ada pertimbangan untuk roda tatal mendatar.

Kita boleh melakukan lebih baik. Mari kita kod!

Menatal Seperti Pro

Langkah pertama kami adalah untuk merebut simpul .slider. Walaupun kita berada di sana, mari ambil barang yang dimuatkan supaya kita dapat memikirkan dimensi slider itu.

Mengukur Carousel

Kita boleh memikirkan kawasan slider yang dapat dilihat dengan mengukur lebarnya:

Kami juga mahu lebar keseluruhan semua item yang terkandung di dalamnya. Untuk memastikan fungsi carousel kami agak bersih, mari letakkan pengiraan ini dalam fungsi berasingan di bahagian atas fail kami.

Dengan menggunakan getBoundingClientRect untuk mengukur offset left item pertama kami dan mengimbangi hak item right, kami boleh menggunakan perbedaan di antara mereka untuk mencari lebar lebar semua item.

Selepas ukuran sliderVisibleWidth kami, tulis:

Kita kini boleh memikirkan jarak maksima karusel kita dibenarkan untuk tatal. Ini adalah lebar lebar semua item kami, minus satu lebar penuh slider yang dapat dilihat. Ini menyediakan nombor yang membolehkan item paling kanan disesuaikan dengan hak slider kami:

Dengan pengukuran ini, kami bersedia untuk menatal carousel kami.

Menetapkan translateX

Popmotion dilengkapi dengan CSS renderer untuk tetapan mudah dan performant CSS properties. Ia juga dilengkapi dengan fungsi nilai yang boleh digunakan untuk mengesan nombor dan, yang penting (seperti yang akan kita lihat), untuk menanyakan halaju mereka.

Di bahagian atas fail JavaScript anda, importnya seperti itu:

Kemudian, pada baris selepas kami menetapkan minXOffset, buat penyerah CSS untuk slider kami:

Dan buat nilai untuk menjejaki x gelangsar kami mengimbangi dan mengemas kini property translateX slider apabila ia berubah:

Sekarang, menggerakkan gelangsar secara mendatar adalah semudah menulis:

Cuba ia!

Touch Scroll

Kami mahu carousel kami mula menatal apabila pengguna menyeret slider secara melintang dan berhenti menatal ketika pengguna berhenti menyentuh skrin. Pengendali acara kami akan kelihatan seperti ini:

Dalam fungsi startTouchScroll kami, kami ingin:

  • Hentikan apa-apa tindakan lain yang menggerakkan sliderX.
  • Cari titik sentuhan asal.
  • Dengarkan acara touchmove seterusnya untuk melihat jika pengguna menyeret secara menegak atau mendatar.

Selepas document.addEventListener, tambahkan:

Ini akan menghentikan apa-apa tindakan lain (seperti tatal momentum berkuasa fizik yang akan kami laksanakan di stopTouchScroll) daripada memindahkan slider. Ini akan membolehkan pengguna untuk segera 'menangkap' gelangsar jika ia menatal lalu item atau tajuk yang mereka mahu klik.

Seterusnya, kita perlu menyimpan titik sentuhan asal. Itu akan membolehkan kita melihat di mana pengguna bergerak jari mereka seterusnya. Sekiranya ia pergerakan menegak, kami akan membenarkan penggiliran halaman seperti biasa. Sekiranya ia adalah pergerakan mendatar, kita akan menatal gelangsar sebaliknya.

Kami mahu touchOrigin ini di antara pengendali acara. Oleh itu, selepas let action; Tambah:

Kembali dalam pengendali startTouchScroll kami, tambahkan:

Kami kini boleh menambah pendengar acara touchmove ke document untuk menentukan arah seret berdasarkan touchOrigin:

Fungsi deterineDragDirection kami akan mengukur lokasi sentuhan seterusnya, periksa ia telah benar-benar berpindah dan, jika ya, ukur sudut untuk menentukan sama ada ia menegak atau mendatar:

Popmotion termasuk beberapa kalkulator yang berguna untuk mengukur perkara seperti jarak antara dua x / y koordinat. Kita boleh mengimport orang seperti ini:

Kemudian mengukur jarak antara kedua-dua titik adalah perkara menggunakan kalkulator distance:

Sekarang jika sentuhan telah dipindahkan, kita boleh menyatarkan pendengar acara ini.

Ukur sudut antara dua mata dengan kalkulator angle:

Kita boleh menggunakan ini untuk menentukan sama ada sudut ini adalah sudut mendatar atau menegak, dengan lulusnya kepada fungsi berikut. Tambah fungsi ini ke bahagian atas fail kami:

Fungsi ini kembali true jika sudut yang disediakan berada dalam -90 / - 45 darjah (lurus ke atas) atau 90 / -45 darjah (lurus ke bawah). Jadi kita boleh menambah klausa return yang lain jika fungsi ini kembali true.

Penjejakan Pointer

Sekarang kita tahu pengguna cuba untuk menatal karusel, kita boleh mula menjejaki jari mereka. Popmotion menawarkan tindakan pointer yang akan mengeluarkan koordinat x / y tetikus atau penunjuk sentuh.

Pertama, pointer import:

Untuk menjejaki input sentuh, berikan acara yang berasal ke pointer:

Kami ingin mengukur kedudukan x awal penuding kami dan menggunakan pergerakan ke slider. Untuk itu, kita boleh menggunakan transformer yang dipanggil applyOffset.

Transformer adalah fungsi tulen yang mengambil nilai, dan mengembalikannya-ya-berubah. Sebagai contoh: const double = (v) => v * 2.

applyOffset adalah fungsi curried. Ini bermakna bahawa apabila kita memanggilnya, ia mewujudkan fungsi baru yang kemudiannya boleh diluluskan nilai. Kami mula-mula memanggilnya dengan nombor yang kami mahu mengukur offset dari, dalam kes ini nilai semasa action.x, dan nombor untuk memohon yang diimbangi. Dalam kes ini, itulah sliderX kami.

Jadi fungsi applyOffset kami akan kelihatan seperti ini:

Kita kini boleh menggunakan fungsi pengeluaran ini dalam panggil balik penunjuk untuk menerapkan pergerakan penunjuk ke slider.

Menghentikan, Dengan Gaya

Korsel kini telah diseret oleh sentuhan! Anda boleh menguji ini dengan menggunakan emulasi peranti dalam Alat Pembangun Chrome.

Rasanya sedikit janky, betul? Anda mungkin menemui penggilapan yang terasa seperti ini sebelum ini: Anda mengangkat jari anda, dan penggiliran berhenti mati. Atau penggiliran berhenti mati dan kemudian animasi kecil mengambil alih palsu meneruskan penggiliran.

Kita tidak akan berbuat demikian. Kita boleh menggunakan tindakan physics dalam Popmotion untuk mengambil halaju sliderX sebenar dan menggunakan geseran padanya sepanjang tempoh masa.

Pertama, tambahkannya kepada senarai import kami yang semakin berkembang:

Kemudian, pada hujung fungsi stopTouchScroll kami, tambahkan:

Di sini, from dan velocity sedang ditetapkan dengan nilai semasa dan halaju sliderX. Ini memastikan simulasi fizik kami mempunyai keadaan permulaan awal yang sama seperti gerakan mengheret pengguna.

friction sedang ditetapkan sebagai 0.2. Geseran ditetapkan sebagai nilai dari 0 hingga 1, dengan 0 tidak geseran sama sekali dan 1 adalah geseran mutlak. Cuba bermain dengan nilai ini untuk melihat perubahan yang dilakukannya kepada 'perasaan' karusel apabila pengguna berhenti menyeret.

Nombor yang lebih kecil akan menjadikannya lebih ringan, dan jumlah yang lebih besar akan menjadikan pergerakan lebih berat. Untuk gerakan menatal, saya merasakan 0.2 hits keseimbangan yang baik antara tidak menentu dan lamban.

Sempadan

Tetapi ada masalah! Sekiranya anda bermain di sekitar dengan karat sentuhan baharu anda, jelas sekali. Kami tidak membatasi pergerakan, menjadikannya mungkin untuk membuang karusel anda secara literal!

Ada lagi pengubah untuk pekerjaan ini, clamp. Ini juga merupakan fungsi curried, bermakna jika kita memanggilnya dengan nilai min dan maks, katakan 0 dan 1, ia akan mengembalikan fungsi baru. Dalam contoh ini, fungsi baru akan menyekat mana-mana nombor yang diberikan kepadanya di antara 0 dan 1:

Pertama, clamp import:

Kami ingin menggunakan fungsi pengikatan ini di seluruh karusel kami, jadi tambahkan baris ini selepas kami menentukan minXOffset:

Kami akan meminda dua output yang telah kami tetapkan pada tindakan kami menggunakan beberapa komposisi fungsional ringan dengan pengubah pipe.

Pipe

Apabila kita memanggil fungsi, kita menulisnya seperti ini:

Sekiranya kita ingin memberi output fungsi itu kepada fungsi lain, kita boleh menulis seperti ini:

Ini menjadi sedikit sukar untuk dibaca, dan ia hanya menjadi semakin teruk kerana kami menambah lebih banyak fungsi.

Dengan pipe, kita boleh menyusun fungsi baru daripada foo dan bar yang boleh kita gunakan semula:

Ia juga ditulis dalam urutan semulajadi -> selesai, yang menjadikannya lebih mudah untuk diikuti. Kita boleh menggunakan applyOffset dan clamp untuk mengimplementasikan Memilih dan mengepil ke dalam satu fungsi. pipe import:

Gantikan semula panggilan output pointer kami dengan:

Dan ganti penggantian output physics dengan:

Komposisi fungsional semacam ini boleh mencipta proses deskriptif, langkah demi langkah daripada fungsi yang lebih kecil dan boleh digunakan semula.

Kini, apabila anda menyeret dan melemparkan karusel, ia tidak akan bergerak keluar dari sempadannya.

Perhentian mendadak tidak begitu memuaskan. Tetapi itu masalah untuk bahagian kemudian!

Kesimpulannya

Itu sahaja untuk bahagian 1. Setakat ini, kami telah melihat carousels yang ada untuk melihat kekuatan dan kelemahan pendekatan yang berbeza untuk menatal. Kami telah menggunakan penjejakan input dan fizik Popmotion untuk menghidupkan translateX karusel kami dengan menatal sentuh. Kami juga telah diperkenalkan kepada komposisi fungsional dan fungsi curried.

Anda boleh merakam versi komen 'kisah setakat ini' pada CodePen ini.

Dalam ansuran yang akan datang, kami akan melihat:

  • menatal dengan mouse wheel
  • mengulangi karusel apabila tetingkap semula
  • penomboran, dengan akses ke papan kekunci dan tetikus
  • sentuhan yang menyenangkan, dengan bantuan fizik musim bunga

Melihat ke hadapan untuk melihat anda di sana!

Advertisement
Advertisement
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.