Membuat komponen Stories

Ringkasan dasar tentang cara membangun pengalaman yang serupa dengan Instagram Stories di web.

Adam Argyle

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

Demo

Jika Anda lebih menyukai demonstrasi langsung untuk membuat komponen Stories ini sendiri, lihat codelab komponen Stories.

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

Ringkasan

Dua contoh populer UX Stories adalah Snapchat Stories dan Instagram Stories (belum lagi fleet). Dalam istilah UX umum, Stories biasanya merupakan pola khusus seluler yang berfokus pada ketukan untuk menavigasi beberapa langganan. Misalnya, di Instagram, pengguna membuka story teman dan melihat foto-foto di dalamnya. Mereka biasanya melakukan ini dengan banyak teman sekaligus. Dengan mengetuk sisi kanan perangkat, pengguna akan langsung ke cerita berikutnya milik teman tersebut. Dengan menggeser ke kanan, pengguna akan langsung menuju teman yang lain. Komponen Cerita cukup mirip dengan carousel, tetapi memungkinkan navigasi array multidimensi, bukan array satu dimensi. Seperti ada carousel di dalam setiap carousel. 🤯

Array multidimensi yang divisualisasi menggunakan kartu. Dari kiri ke kanan adalah tumpukan kartu dengan batas ungu, dan di dalam setiap kartu terdapat 1-banyak kartu dengan batas cyan. Daftar dalam daftar.
Carousel pertama teman
Carousel kedua "bertumpuk" dari cerita
👍 Daftar dalam daftar, alias: array multi-dimensi

Memilih {i>tool<i} yang tepat untuk pekerjaan Anda

Secara keseluruhan, saya mendapati bahwa komponen ini cukup mudah dibuat, berkat beberapa fitur platform web yang penting. Mari kita bahas.

Petak CSS

Tata letak kami ternyata tidak terlalu sulit untuk CSS Grid karena dilengkapi dengan beberapa cara efektif untuk mengelola 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 Device Mode di Chrome DevTools untuk menandai kolom yang dibuat oleh Grid

Mari kita uraikan tata letak grid tersebut:

  • Kami mengisi viewport di perangkat seluler secara eksplisit dengan 100vh dan 100vw serta membatasi ukuran di desktop
  • / memisahkan template baris dan kolom
  • auto-flow diterjemahkan ke grid-auto-flow: column
  • Template alur otomatis adalah 100%, yang dalam hal ini adalah lebar jendela scroll

Di ponsel, anggaplah ini seperti ukuran baris adalah tinggi area pandang dan setiap kolom adalah lebar area pandang. Melanjutkan contoh Cerita Snapchat dan Cerita Instagram, setiap kolom akan berisi cerita teman. Kita ingin cerita teman berlanjut di luar area pandang sehingga kita memiliki tempat untuk men-scroll. Grid akan membuat berapa pun kolom yang diperlukan untuk menata letak HTML Anda bagi setiap cerita teman, sehingga membuat container scroll yang dinamis dan responsif bagi kita. {i>Grid<i} memungkinkan kita untuk memusatkan seluruh efek.

Promosi gabungan

Untuk setiap teman, kita memerlukan story mereka dalam status siap penomoran halaman. Sebagai persiapan untuk animasi dan pola menyenangkan lainnya, saya memilih stack. Saat saya mengatakan stack, maksud saya seperti Anda melihat sandwich dari atas, bukan seperti Anda melihat dari samping.

Dengan petak CSS, kita dapat menentukan petak sel tunggal (yaitu persegi), dengan baris dan kolom berbagi alias ([story]), lalu setiap turunan ditetapkan ke ruang sel tunggal dengan 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 mengalir. Perhatikan bahwa kita tidak perlu melakukan apa pun pada penempatan absolute atau z-index, dan kita tidak perlu memperbaiki kotak dengan height: 100% atau width: 100%. Petak induk telah menentukan ukuran area pandang gambar cerita, sehingga tidak ada komponen cerita yang perlu diberi tahu untuk mengisinya.

Titik Snap Scroll CSS

Spesifikasi Titik Snap Scroll CSS memudahkan Anda mengunci elemen ke dalam area pandang saat men-scroll. Sebelum properti CSS ini ada, Anda harus menggunakan JavaScript, dan itu… sulit, untuk sedikitnya. Lihat Memperkenalkan Snap Points Scroll CSS oleh Sarah Drasner untuk penjelasan mendetail tentang cara menggunakannya.

Scroll horizontal tanpa dan dengan gaya scroll-snap-points. Tanpa ponsel, pengguna dapat menggulir seperti biasa. Dengan demikian, browser akan beristirahat dengan lembut 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 snap.
anak
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Anak-anak memilih untuk menjadi target snap.

Saya memilih Titik Snap Scroll karena beberapa alasan:

  • Aksesibilitas gratis. Spesifikasi Titik Snap Scroll menyatakan bahwa menekan tombol Panah Kiri dan Panah Kanan akan berpindah melalui titik snap secara default.
  • Spesifikasi yang terus berkembang. Spesifikasi Titik Snap Scroll terus mendapatkan fitur dan peningkatan baru, yang berarti komponen Stories saya mungkin akan semakin baik dari sekarang dan seterusnya.
  • Kemudahan penerapan. Titik Snap Scroll praktis dibuat untuk kasus penggunaan penomoran halaman horizontal yang berfokus pada sentuh.
  • Inersia gaya platform gratis. Setiap platform akan di-scroll dan beristirahat sesuai gayanya, berbeda dengan inersia yang dinormalisasi yang dapat memiliki gaya scroll dan istirahat yang luar biasa.

Kompatibilitas lintas browser

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

Namun, kami memiliki beberapa CSS yang tidak berlaku, sehingga beberapa platform saat ini tidak memiliki pengoptimalan UX. Saya senang tidak perlu mengelola fitur ini dan merasa yakin bahwa fitur tersebut pada akhirnya akan menjangkau browser dan platform lain.

scroll-snap-stop

Carousel adalah salah satu kasus penggunaan UX utama yang mendorong pembuatan spec CSS Scroll Snap Points. Tidak seperti Stories, carousel tidak selalu perlu berhenti di setiap gambar setelah pengguna berinteraksi dengannya. Anda dapat beralih dengan cepat antar-carousel. Di sisi lain, cerita sebaiknya dibuka 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, ini bukan pemblokir. Artinya, pada browser yang tidak didukung, pengguna dapat tidak sengaja melewati teman. Jadi, pengguna harus lebih berhati-hati, atau kita harus menulis JavaScript untuk memastikan teman yang dilewati tidak ditandai sebagai telah dilihat.

Baca selengkapnya di spesifikasi jika Anda tertarik.

overscroll-behavior

Pernahkah Anda men-scroll modal, lalu tiba-tiba mulai men-scroll konten di balik modal? overscroll-behavior membiarkan developer men-scroll dan tidak membiarkannya keluar. Cocok untuk berbagai acara. Komponen My Stories menggunakannya untuk mencegah gestur geser dan 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 sama sekali tidak masalah. Pengguna tersebut akan mendapatkan pengalaman overscroll seperti biasa dan mungkin tidak menyadari peningkatan ini. Saya pribadi adalah penggemar berat dan suka menyertakannya sebagai bagian dari hampir setiap fitur overscroll yang saya terapkan. Ini adalah tambahan yang tidak berbahaya dan hanya dapat meningkatkan UX.

scrollIntoView({behavior: 'smooth'})

Saat pengguna mengetuk atau mengklik dan telah mencapai akhir rangkaian cerita teman, waktunya untuk berpindah ke teman berikutnya dalam set snap point scroll. Dengan JavaScript, kita dapat mereferensikan teman dan permintaan berikutnya agar dapat di-scroll ke tampilan. Dukungan untuk dasar-dasar ini sangat bagus; setiap browser men-scroll ke tampilan. Namun, tidak semua browser melakukannya 'smooth'. Ini berarti kode di-scroll ke tampilan, bukan dipaskan.

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

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

Langsung

Setelah Anda tahu cara saya melakukannya, bagaimana Anda melakukannya? Mari kita diversifikasi pendekatan dan pelajari semua cara untuk mem-build di web. Buat Glitch, tweet versi Anda kepada saya, dan saya akan menambahkannya ke bagian Gabungan komunitas di bawah.

Remix komunitas