Membuat komponen Stories

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

Adam Argyle

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

Demo

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

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

Ringkasan

Dua contoh populer Stories UX adalah Snapchat Stories dan Instagram Stories (belum lagi armada). Dalam istilah UX umum, Stories biasanya merupakan pola khusus seluler yang berfokus pada ketuk untuk membuka beberapa langganan. Misalnya, di Instagram, pengguna membuka kisah teman dan melihat foto-foto yang ada di dalamnya. Mereka biasanya melakukan ini banyak teman sekaligus. Dengan mengetuk sisi kanan perangkat, pengguna akan langsung melanjutkan ke cerita berikutnya dari teman tersebut. Dengan menggeser ke kanan, pengguna dapat berpindah ke teman yang lain. Komponen Cerita cukup mirip dengan carousel, tetapi memungkinkan navigasi array multi-dimensi, bukan array satu dimensi. Seolah-olah ada {i>carousel<i} di dalam setiap {i>carousel<i}. 🤯

Array multidimensi yang divisualisasikan menggunakan kartu. Kiri ke kanan adalah tumpukan kartu batas berwarna ungu, dan di dalam setiap kartu ada 1-banyak kartu berbatas sian. Daftar dalam daftar.
Carousel pertama teman
Carousel cerita ke-2 "tumpukan"
👍 Daftar dalam daftar, alias: array multi-dimensi

Memilih alat yang tepat untuk pekerjaan

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

Petak CSS

Tata letak kita ternyata bukan urutan tinggi untuk CSS Grid karena dilengkapi dengan beberapa cara ampuh untuk menangani konten.

Tata letak teman

Wrapper komponen .stories utama kami adalah scrollview horizontal yang mengutamakan 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 Petak

Mari kita uraikan tata letak grid tersebut:

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

Pada ponsel, anggaplah ini seperti ukuran baris sebagai tinggi area pandang dan setiap kolom menjadi lebar area pandang. Melanjutkan dengan contoh Snapchat Stories dan Instagram Stories, setiap kolom akan menjadi cerita teman. Kita ingin cerita teman terus berlanjut di luar area pandang sehingga kita memiliki tempat untuk di-scroll. Petak akan membuat berapa pun kolom yang diperlukan untuk menata HTML Anda dalam setiap cerita teman, sehingga menciptakan container scroll yang dinamis dan responsif. Grid memungkinkan kita untuk memusatkan seluruh efek.

Promosi gabungan

Untuk setiap teman, kita memerlukan cerita mereka dalam status yang siap untuk penomoran halaman. Untuk menyiapkan animasi dan pola menyenangkan lainnya, saya memilih stack. Ketika saya mengatakan {i>stack<i}, maksud saya seperti Anda melihat sandwich ke bawah, tidak 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 ditugaskan ke ruang sel tunggal beralias tersebut:

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

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

Dengan demikian, HTML kita dapat mengontrol urutan tumpukan dan menjaga semua elemen tetap mengalir. Perhatikan bahwa kita tidak perlu melakukan apa pun dengan positioning absolute atau z-index, dan tidak perlu melakukan box yang benar dengan height: 100% atau width: 100%. Petak induk sudah menentukan ukuran area tampilan gambar cerita, sehingga komponen cerita ini tidak perlu diminta untuk mengisinya.

Titik Snap Scroll CSS

Spesifikasi Poin Snap Scroll CSS memudahkan Anda mengunci elemen ke area pandang saat men-scroll. Sebelum ada properti CSS ini, Anda harus menggunakan JavaScript, dan itu... sungguh sulit. Lihat Memperkenalkan Poin Snap Scroll CSS oleh Sarah Drasner untuk perincian lengkap cara menggunakannya.

Scroll horizontal tanpa dan dengan gaya scroll-snap-points. Tanpanya, pengguna dapat men-scroll bebas seperti biasa. Dengan ID ini, browser diletakkan dengan lembut pada setiap item.
parent
.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 Scroll Snap Points karena beberapa alasan:

  • Aksesibilitas gratis. Status spesifikasi Titik Snap Scroll yang menyatakan bahwa menekan tombol Panah Kiri dan Panah Kanan akan berpindah melalui titik snap secara default.
  • Spesifikasi yang terus bertambah. Spesifikasi Scroll Snap Points mendapatkan fitur dan peningkatan baru setiap saat, yang berarti bahwa komponen Stories saya mungkin akan menjadi lebih baik dari sini dan seterusnya.
  • Kemudahan penerapan. Titik Snap Scroll secara praktis dibuat untuk kasus penggunaan penomoran halaman horizontal yang berpusat pada sentuhan.
  • Inersia gaya platform gratis. Setiap platform akan di-scroll dan berhenti dalam gayanya, berbeda dengan inersia yang dinormalisasi yang dapat memiliki gaya scroll dan istirahat yang luar biasa.

Kompatibilitas lintas browser

Kami melakukan pengujian di Opera, Firefox, Safari, dan Chrome, plus Android dan iOS. Berikut adalah info singkat tentang fitur web yang menunjukkan perbedaan kemampuan dan dukungan.

Meskipun demikian, kami mendapati beberapa CSS tidak berlaku, sehingga beberapa platform saat ini melewatkan pengoptimalan UX. Saya tidak perlu mengelola fitur ini dan merasa yakin bahwa fitur ini pada akhirnya akan menjangkau browser dan platform lain.

scroll-snap-stop

Korsel adalah salah satu kasus penggunaan UX utama yang mendorong pembuatan spesifikasi Poin Snap Scroll CSS. Tidak seperti Cerita, carousel tidak selalu perlu berhenti pada setiap gambar setelah pengguna berinteraksi dengannya. Mungkin tidak masalah atau disarankan untuk menggunakan korsel dengan cepat. Di sisi lain, story sebaiknya dibuka satu per satu, dan itulah yang disediakan oleh scroll-snap-stop.

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

Pada saat postingan ini ditulis, scroll-snap-stop hanya didukung di browser berbasis Chromium. Lihat Kompatibilitas browser untuk mengetahui update. Namun, ini bukan penghambat. Hanya saja, di {i>browser<i} yang tidak didukung, pengguna dapat melewatkan teman secara tidak sengaja. Jadi pengguna hanya perlu lebih berhati-hati, atau kita harus menulis JavaScript untuk memastikan bahwa teman yang dilewati tidak ditandai sebagai dilihat.

Baca selengkapnya di spesifikasi jika Anda tertarik.

overscroll-behavior

Pernahkah Anda men-scroll modal ketika tiba-tiba mulai men-scroll konten di belakang modal? overscroll-behavior membiarkan developer menangkap yang men-scroll dan tidak pernah membiarkannya pergi. Ini cocok untuk segala macam acara. Komponen Cerita Saya menggunakannya untuk mencegah geseran dan gestur scroll tambahan keluar dari komponen.

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

Safari dan Opera adalah 2 browser yang tidak mendukung ini, dan itu tidak masalah. Pengguna tersebut akan mendapatkan pengalaman overscroll seperti biasanya dan mungkin tidak pernah menyadari peningkatan ini. Saya pribadi penggemar berat dan suka menyertakannya sebagai bagian dari hampir setiap fitur {i>overscroll<i} yang saya terapkan. Ini adalah penambahan yang tidak berbahaya dan hanya mengarah pada peningkatan UX.

scrollIntoView({behavior: 'smooth'})

Ketika pengguna mengetuk atau mengklik dan telah mencapai akhir dari rangkaian cerita teman, saatnya berpindah ke teman berikutnya dalam kumpulan titik snap scroll. Dengan JavaScript, kita bisa mereferensikan teman berikutnya dan memintanya untuk di-scroll ke tampilan. Dukungan untuk dasar-dasarnya sangat bagus; setiap browser men-scroll hingga terlihat. Namun, tidak semua browser melakukannya 'smooth'. Artinya, elemen ini digulir ke dalam tampilan, bukan dipaskan.

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

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

Langsung

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

Remix komunitas