Membuat komponen Stories

Ringkasan dasar tentang cara membuat pengalaman yang mirip dengan Instagram Stories di web.

Adam Argyle

Dalam postingan ini, saya ingin berbagi pemikiran tentang cara membuat komponen Stories untuk web yang responsif, mendukung navigasi keyboard, dan berfungsi di seluruh browser.

Demo

Jika Anda lebih suka demonstrasi langsung tentang cara membuat komponen Stories ini sendiri, lihat codelab komponen Stories.

Jika Anda lebih suka menonton video, berikut versi YouTube dari postingan ini:

Ringkasan

Dua contoh UX Stories yang populer adalah Snapchat Stories dan Instagram Stories (belum lagi fleets). Secara umum, dalam istilah UX, Stories biasanya merupakan pola khusus seluler yang berpusat pada ketukan untuk menavigasi beberapa langganan. Misalnya, di Instagram, pengguna membuka cerita teman dan melihat gambar di dalamnya. Mereka biasanya melakukan hal ini kepada banyak teman sekaligus. Dengan mengetuk sisi kanan perangkat, pengguna akan melewati cerita teman berikutnya. Dengan menggeser ke kanan, pengguna akan melewati teman yang sedang ditampilkan dan beralih ke teman lain. Komponen Story cukup mirip dengan carousel, tetapi memungkinkan navigasi array multi-dimensi, bukan array satu dimensi. Seolah-olah ada carousel di dalam setiap carousel. 🤯

Memvisualisasikan array multi-dimensi menggunakan kartu. Dari kiri ke kanan adalah tumpukan kartu berbingkai ungu, dan di dalam setiap kartu terdapat 1-banyak kartu berbingkai cyan. Daftar dalam daftar.
Carousel pertama teman
Carousel "bertumpuk" kedua berisi cerita
👍 Daftar dalam daftar, alias: array multi-dimensi

Memilih alat yang tepat untuk pekerjaan

Secara keseluruhan, saya merasa komponen ini cukup mudah dibuat, berkat beberapa fitur platform web penting. Mari kita bahas!

Petak CSS

Tata letak kami ternyata tidak sulit untuk CSS Grid karena dilengkapi dengan beberapa cara yang efektif untuk mengatur konten.

Tata letak teman

Wrapper komponen .stories utama kami adalah scrollview horizontal yang mengutamakan perangkat seluler:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
Menggunakan Mode Perangkat Chrome DevTools untuk menandai kolom yang dibuat oleh Grid

Mari kita uraikan tata letak grid tersebut:

  • Kita mengisi area pandang di perangkat seluler secara eksplisit dengan 100vh dan 100vw serta membatasi ukuran di desktop
  • / memisahkan template baris dan kolom kita
  • auto-flow diterjemahkan menjadi grid-auto-flow: column
  • Template autoflow adalah 100%, yang dalam hal ini adalah lebar jendela scroll

Di ponsel, anggap ini seperti ukuran baris adalah tinggi area pandang dan setiap kolom adalah lebar area pandang. Melanjutkan contoh Snapchat Stories dan Instagram Stories, setiap kolom akan menjadi cerita teman. Kita ingin cerita teman berlanjut di luar area pandang sehingga kita memiliki tempat untuk men-scroll. Grid akan membuat kolom sebanyak yang diperlukan untuk menata letak HTML Anda untuk setiap cerita teman, sehingga membuat penampung scroll yang dinamis dan responsif untuk kita. Grid memungkinkan kami memusatkan seluruh efek.

Menumpuk

Untuk setiap teman, kita memerlukan cerita mereka dalam keadaan siap untuk penomoran halaman. Untuk mempersiapkan animasi dan pola menarik lainnya, saya memilih tumpukan. Yang saya maksud dengan menumpuk adalah seperti Anda melihat ke bawah sandwich, bukan seperti Anda melihat dari samping.

Dengan petak CSS, kita dapat menentukan petak sel tunggal (yaitu persegi), tempat baris dan kolom berbagi alias ([story]), lalu setiap turunan ditetapkan ke ruang sel tunggal yang diberi alias tersebut:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

Hal ini membuat HTML kita mengontrol urutan penumpukan dan juga menjaga semua elemen tetap dalam alur. Perhatikan bahwa kita tidak perlu melakukan apa pun dengan pemosisian absolute atau z-index dan kita tidak perlu mengoreksi kotak dengan height: 100% atau width: 100%. Petak induk sudah menentukan ukuran area tampilan gambar cerita, sehingga tidak ada komponen cerita yang perlu diberi tahu untuk mengisinya.

Titik Pengepasan Scroll CSS

Spesifikasi CSS Scroll Snap Points memudahkan penguncian elemen ke dalam viewport saat men-scroll. Sebelum properti CSS ini ada, Anda harus menggunakan JavaScript, dan itu… rumit, setidaknya. Lihat Introducing CSS Scroll Snap Points oleh Sarah Drasner untuk mengetahui perincian yang bagus tentang cara menggunakannya.

Scroll horizontal tanpa dan dengan gaya scroll-snap-points. Tanpa itu, pengguna dapat men-scroll bebas seperti biasa. Dengan demikian, browser akan berhenti dengan lancar di setiap item.
induk
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
 Induk dengan overscroll menentukan perilaku penyesuaian.
anak
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Anak-anak memilih untuk menjadi target pengepasan.

Saya memilih Titik Pengepasan Scroll karena beberapa alasan:

  • Aksesibilitas gratis. Spesifikasi Titik Pengepasan Scroll menyatakan bahwa menekan tombol Panah Kiri dan Panah Kanan akan berpindah antartitik pengepasan secara default.
  • Spesifikasi yang terus berkembang. Spesifikasi Scroll Snap Points terus mendapatkan fitur dan peningkatan baru, yang berarti komponen Stories saya mungkin akan terus menjadi lebih baik.
  • Kemudahan penerapan. Titik Paskan Scroll pada dasarnya dibuat untuk kasus penggunaan penomoran halaman horizontal yang berfokus pada sentuhan.
  • Inersia gaya platform bebas. Setiap platform akan men-scroll dan berhenti dalam gayanya, berbeda dengan inersia yang dinormalisasi yang dapat memiliki gaya men-scroll dan berhenti yang aneh.

Kompatibilitas lintas browser

Kami melakukan pengujian di Opera, Firefox, Safari, dan Chrome, serta Android dan iOS. Berikut ringkasan singkat fitur web yang kami temukan perbedaan kemampuan dan dukungannya.

Namun, kami memiliki beberapa CSS yang tidak diterapkan, sehingga beberapa platform saat ini tidak mendapatkan pengoptimalan UX. Saya menikmati karena tidak perlu mengelola fitur ini dan merasa yakin bahwa fitur ini pada akhirnya akan tersedia di browser dan platform lain.

scroll-snap-stop

Carousel adalah salah satu kasus penggunaan UX utama yang mendorong pembuatan spesifikasi CSS Scroll Snap Points. Tidak seperti Cerita, carousel tidak selalu perlu berhenti di setiap gambar setelah pengguna berinteraksi dengannya. Anda mungkin boleh atau dianjurkan untuk beralih dengan cepat antar-carousel. Sebaliknya, Cerita paling baik dijelajahi satu per satu, dan itulah yang disediakan scroll-snap-stop.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Pada saat penulisan postingan ini, scroll-snap-stop hanya didukung di browser berbasis Chromium. Lihat Kompatibilitas browser untuk mengetahui info terbaru. Namun, hal ini tidak memblokir. Hal ini hanya berarti bahwa di browser yang tidak didukung, pengguna dapat secara tidak sengaja melewati teman. Jadi, pengguna hanya perlu lebih berhati-hati, atau kita perlu menulis JavaScript untuk memastikan bahwa teman yang dilewati tidak ditandai sebagai sudah dilihat.

Baca selengkapnya di spesifikasi jika Anda tertarik.

overscroll-behavior

Pernahkah Anda men-scroll modal, lalu tiba-tiba Anda mulai men-scroll konten di belakang modal? overscroll-behavior memungkinkan developer menjebak scroll tersebut dan tidak pernah membiarkannya keluar. Cocok untuk berbagai acara. Komponen My Stories menggunakannya untuk mencegah gestur menggeser dan men-scroll tambahan keluar dari komponen.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari dan Opera adalah 2 browser yang tidak mendukung hal ini, dan itu tidak masalah. Pengguna tersebut akan mendapatkan pengalaman overscroll seperti yang biasa mereka gunakan dan mungkin tidak akan pernah menyadari peningkatan ini. Saya pribadi adalah penggemar berat dan suka menyertakannya sebagai bagian dari hampir setiap fitur scroll berlebih yang saya terapkan. Penambahan ini tidak berbahaya dan hanya dapat meningkatkan UX.

scrollIntoView({behavior: 'smooth'})

Saat pengguna mengetuk atau mengklik dan telah mencapai akhir rangkaian cerita teman, saatnya beralih ke teman berikutnya dalam set titik paskan scroll. Dengan JavaScript, kita dapat mereferensikan teman berikutnya dan meminta agar teman tersebut di-scroll ke tampilan. Dukungan untuk dasar-dasar ini sangat bagus; setiap browser men-scrollnya ke tampilan. Namun, tidak semua browser melakukannya 'smooth'. Ini hanya berarti tampilan di-scroll ke dalam tampilan, bukan di-snap.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari adalah satu-satunya browser yang tidak mendukung behavior: 'smooth' di sini. Lihat Kompatibilitas browser untuk mengetahui info terbaru.

Langsung

Sekarang setelah Anda tahu cara saya melakukannya, bagaimana Anda?! Mari kita diversifikasi pendekatan kita dan pelajari semua cara untuk membangun di web. Buat Glitch, tweet versi Anda kepada kami, dan kami akan menambahkannya ke bagian Remix komunitas di bawah.

Remix komunitas